Vueドキュメントでの折り畳みボックス/アコーディオンコンポーネントの実装方法

Vue は、人気のある JavaScript フレームワークとして、開発を容易にする多くのコンポーネントと機能を提供します。一般的な UI コンポーネントの 1 つはアコーディオン (アコーディオンとも呼ばれます) です。これを使用すると、ユーザーはコンテンツを展開したり折りたたんだりしてスペースを節約できます。 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>

この折りたたみボックス コンポーネントは、1 つの折りたたみボックスにのみ適用されます。複数の折りたたみボックスを実装する必要がある場合は、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>

この例では、配列アイテムを使用して、3 つの折りたたみボックスのステータス データ、タイトル、内容を保存します。次に、v-for ディレクティブを使用して 3 つのコンポーネントが生成されました。各コンポーネントの展開状態、タイトル、コンテンツは、対応する item 配列 items から取得されます。

要約すると、Vue ドキュメントでの折りたたみボックス コンポーネントの実装方法は非常に簡単です。展開状態を制御するブール値を定義し、v-if または v-show 命令を使用するだけです。表示と非表示を切り替えます。複数の折りたたみボックスを実装する必要がある場合は、v-for ディレクティブを使用して複数のコンポーネントを動的に生成できます。このコンポーネントのソース コードを学習して実践することで、Vue の基本的な使用法をすぐにマスターし、Vue を使用してより複雑な UI コンポーネントやアプリケーションを構築できます。

以上がVueドキュメントでの折り畳みボックス/アコーディオンコンポーネントの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。