Vue 문서에서 접이식 상자/아코디언 구성요소 구현 방법

Vue는 널리 사용되는 JavaScript 프레임워크로서 개발을 촉진하는 많은 구성 요소와 기능을 제공합니다. 일반적인 UI 구성 요소 중 하나는 아코디언(아코디언이라고도 함)으로, 이를 통해 사용자는 콘텐츠를 확장 및 축소하여 공간을 절약할 수 있습니다. Vue 문서에서 간단하지만 완벽하게 작동하는 접이식 상자 구성 요소를 찾을 수 있습니다. 그 구현 방법을 소개하겠습니다.

먼저 Vue 구성 요소에서 접이식 상자의 확장 상태를 제어하기 위해 일부 데이터를 정의해야 합니다. 이 데이터는 isCollapsed와 같은 부울 값일 수 있습니다. isCollapsed가 true이면 접는 상자가 접히고, false이면 접는 상자가 확장됩니다.

다음으로 Vue 템플릿에서 v-if 또는 v-show 지시문을 사용하여 isCollapsed 상태에 따라 접이식 상자의 표시 및 숨기기를 제어해야 합니다. v-if 지시문은 DOM 요소를 완전히 제거할 수 있는 반면, v-show 지시문은 CSS 표시 속성을 통해 요소의 표시 및 숨기기만 제어합니다. 접기 상자가 확장될 때 내용이 표시되어야 하므로 내용을 지시문 안에 배치합니다.

다음은 간단한 축소 상자 템플릿의 예입니다.

<template>
  <div>
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

이 템플릿에서는 버튼을 사용하여 isCollapsed 값을 전환하고 버튼에 해당 텍스트를 표시합니다. 축소 상자의 내용은 v-show 명령을 사용하여 제어되며 isCollapsed가 false일 때 표시됩니다.

다음으로 접이식 상자 구성 요소에 몇 가지 스타일을 추가하여 더 나은 인터페이스 효과를 얻을 수 있습니다. 기본 스타일은 다음과 같습니다.

<style>
  .collapse {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>

이 스타일을 축소 상자 구성 요소에 적용합니다.

<template>
  <div class="collapse">
    <button @click="isCollapsed = !isCollapsed">{{ isCollapsed ? '展开' : '收起' }}</button>

    <div v-show="!isCollapsed">
      这里是折叠框的内容。
    </div>
  </div>
</template>

이 축소 상자 구성 요소는 단일 축소 상자에만 적용됩니다. 여러 개의 접이식 상자를 구현해야 하는 경우 Vue의 루프 명령어 v-for를 사용하여 여러 구성요소를 동적으로 생성할 수 있습니다. 배열을 사용하여 각 접는 상자에 해당하는 상태 데이터, 제목 및 내용을 저장할 수 있으며 v-for를 사용하여 여러 구성 요소를 생성할 수 있습니다. 예는 다음과 같습니다.

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <div class="collapse">
        <button @click="item.isCollapsed = !item.isCollapsed">{{ item.isCollapsed ? item.title + ' - 展开' : item.title + ' - 收起' }}</button>

        <div v-show="!item.isCollapsed">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {isCollapsed: true, title: '折叠框标题1', content: '折叠框内容1'},
        {isCollapsed: true, title: '折叠框标题2', content: '折叠框内容2'},
        {isCollapsed: true, title: '折叠框标题3', content: '折叠框内容3'},
      ]
    }
  }
}
</script>

이 예에서는 배열 항목을 사용하여 세 개의 축소 상자의 상태 데이터, 제목 및 내용을 저장합니다. 그런 다음 v-for 지시문을 사용하여 세 가지 구성 요소를 생성했습니다. 각 구성 요소의 확장된 상태, 제목, 콘텐츠는 해당 항목 배열 항목에서 가져옵니다.

요약하자면 Vue 문서에서 접는 상자 구성 요소의 구현 방법은 매우 간단합니다. 확장 상태를 제어하려면 부울 값만 정의하고 v-if 또는 v-show 명령을 사용하여 표시하고 숨기면 됩니다. . 여러 개의 접이식 상자를 구현해야 하는 경우 v-for 지시어를 사용하여 여러 구성 요소를 동적으로 생성할 수 있습니다. 이 구성 요소의 소스 코드를 연구하고 연습함으로써 Vue의 기본 사용법을 빠르게 익힐 수 있으며 이를 사용하여 보다 복잡한 UI 구성 요소와 애플리케이션을 구축할 수 있습니다.

위 내용은 Vue 문서에서 접이식 상자/아코디언 구성요소 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!