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 命令を使用してレンダリング リストをループし、同時にクリック イベントをバインドできます。

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

#JavaScript ロジック

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; }, },

スタイル設定

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

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

ログイン後にコピー

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