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

Vue は、Web 開発の分野で広く使用されている人気のある JavaScript ライブラリです。 Vue では、さまざまなコンポーネントやインタラクティブなエフェクトを簡単に実装できます。その中でも、折りたたみ可能なリストはより実用的なコンポーネントであり、リスト データをグループ化してデータ表示の読みやすさを向上させると同時に、特定のコンテンツを展開する必要がある場合に展開できるため、ユーザーが詳細を表示するのに便利です。情報。この記事では、Vue を使用して折りたたみ可能なリストを実装する方法を紹介します。

1. 準備作業

Vue を使用して折りたたみ可能なリストを実装する前に、次の作業を準備する必要があります。

1.1 Vue 環境: Vue をインストールします。 js は、公式 Web サイトのダウンロードまたは CDN の導入を通じてインポートできます。

1.2 データの準備: 表示するデータ (配列またはオブジェクト) を準備します。各項目には、表示されるデータのタイトルと内容が含まれます。

2. HTML 構造

折りたたみ可能なリストは主に 2 つの部分で構成されます。1 つはリストを表示するタイトル部分で、もう 1 つはリストの内容を表示する部分です。リスト。このうち、タイトル部分はコンテンツ部分の展開と折りたたみをトリガーするクリックイベントを設定する必要があります。したがって、以下に示すように、Vue の v-for 命令を使用してレンダリング リストをループし、同時にクリック イベントをバインドできます。

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

このコードでは、ul を含むラッピング要素を使用します。および div のセット。このうちタイトル部分の複数のliはulで表現されており、それぞれのliの内容はitem.titleとなります。各 li に対応する拡張コンテンツは v-show 命令によって制御されます。 item.show が true の場合、展開されたコンテンツが表示されます。

#JavaScript ロジック

次に、折りたたみ可能なリストの機能を実装するための JavaScript ロジックを記述する必要があります。具体的な手順は次のとおりです。 #3.1 データ構造の定義

データには 2 つの部分が含まれている必要があります。1 つはリストのタイトルで、もう 1 つはリストの対応するコンテンツです。したがって、次のようにデータ構造を定義できます。

data() {
  return {
    dataList: [
      {
        title: "列表标题1",
        content: "列表1的详细内容",
        show: false,
      },
      {
        title: "列表标题2",
        content: "列表2的详细内容",
        show: false,
      },
      {
        title: "列表标题3",
        content: "列表3的详细内容",
        show: false,
      },
    ],
  };
},

このうち、show パラメータは展開部分を表示するかどうかを制御するために使用されます。最初は、展開された部分を閉じたいので、show 値を false に設定します。

3.2 クリックして展開状態を切り替える

クリックによる展開/折りたたみ効果を実現するには、タイトル部分の li 要素にクリック イベントをバインドする必要があります。 toggle メソッドを呼び出すことで、各リストに対応する展開状態を切り替えることができます。具体的なコードは次のとおりです:

methods: {
  toggle(index) {
    const item = this.dataList[index];
    item.show = !item.show;
  },
},

toggle メソッドでは、現在のリスト項目 item を取得し、展開内容を制御します。 show パラメータ。表示と非表示を切り替えます。

スタイル設定

4. 最後に、より美しく表示できるようにリストのスタイルを設定する必要があります。

li {
  background: #eee;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

li:hover {
  background: #ccc;
}

div {
  padding: 10px;
}

CSS では、各 li 要素のスタイルを設定します。マウスホバー時の背景色も変更しました。展開されたコンテンツセクションのスタイルもシンプルに設定されています。

この時点で、折りたたみ可能なリストの実装が完了しました。完全なコードは次のとおりです:

<template>
  <div>
    <ul>
      <li v-for="(item,index) in dataList" :key="index" @click="toggle(index)">
        {{ item.title }}
      </li>
    </ul>
    <div v-for="(item,index) in dataList" :key="index">
      <div v-show="item.show">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        {
          title: "列表标题1",
          content: "列表1的详细内容",
          show: false,
        },
        {
          title: "列表标题2",
          content: "列表2的详细内容",
          show: false,
        },
        {
          title: "列表标题3",
          content: "列表3的详细内容",
          show: false,
        },
      ],
    };
  },
  methods: {
    toggle(index) {
      const item = this.dataList[index];
      item.show = !item.show;
    },
  },
};
</script>

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