Vue を使用して折りたたまれたリストを実装するにはどうすればよいですか?

Vue は、インタラクティブな Web アプリケーションの構築を容易にする人気の JavaScript フレームワークです。この記事では、Vue を使用して折りたたまれたリストを実装する方法について説明します。折りたたみリストは、ユーザーがコンテンツを展開したり折りたたんだりできるようにする一般的な対話型コンポーネントです。

Vue では、v-if および v-show 命令を使用して、折りたたまれたリストを簡単に実装できます。これら 2 つのディレクティブは同様の機能を持ち、要素の可視性を制御できます。 v-if は条件に基づいて要素を追加または削除しますが、v-show は要素の表示状態と非表示状態を切り替えるだけです。

まず、Vue インスタンスを作成し、HTML 要素にマウントする必要があります。次に、折りたたまれたリスト内のすべての項目を含む配列を定義します。この例では、リスト項目が次の形式であると仮定します。

{
  title: 'Item 1',
  content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
},

また、各リスト項目の表示/非表示を切り替えるボタンをテンプレートに定義する必要もあります。これは、v-show ディレクティブを使用して実現できます。ボタンをクリックすると、contentDiv の表示/非表示を切り替えます。

以下は、基本的な折りたたみリスト コンポーネント テンプレートです:

<div id="app">
  <h2>折叠列表</h2>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <button @click="toggle(index)">展开/收起</button>
      <h3>{{ item.title }}</h3>
      <div v-show="item.showContent" class="contentDiv">{{ item.content }}</div>
    </li>
  </ul>
</div>

次に、リスト項目の配列と、各リスト項目の表示/非表示を切り替えるための切り替え関数を Vue インスタンスで定義する必要があります。セックス。 toggle 関数は、切り替えるリスト項目のインデックスである 1 つのパラメーターを受け入れます。この関数は、項目の showContent プロパティを反転し、コンポーネントの状態も更新します。

new Vue({
  el: '#app',
  data: {
    items: [
      {
        title: 'Item 1',
        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
        showContent: false
      },
      {
        title: 'Item 2',
        content: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
        showContent: false
      },
      {
        title: 'Item 3',
        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
        showContent: false
      }
    ]
  },
  methods: {
    toggle: function(index) {
      this.items[index].showContent = !this.items[index].showContent;
    }
  }
})

最後に、コンポーネントに CSS スタイルを追加して、外観とレイアウトを制御する必要があります。

ul {
  list-style: none;
  padding: 0;
}

li {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px;
}

button {
  background: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #333;
  cursor: pointer;
  outline: none;
  padding: 5px 10px;
}

.contentDiv {
  margin-top: 10px;
}

これで、単純な折りたたみリスト コンポーネントが完成しました。このコンポーネントを使用して、アプリケーションに対話型リストを表示できます。カスタム スタイルやその他の機能を追加することで、このコンポーネントを拡張できます。

つまり、Vue は、インタラクティブな Web アプリケーションの構築を容易にする多くの便利な機能を提供する、非常に強力なフロントエンド フレームワークです。 Vue を使用すると、折りたたみリストなどの複雑な UI コンポーネントを簡単に実装できます。

以上がVue を使用して折りたたまれたリストを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。