Vue でグループ化されたリストを実装するにはどうすればよいですか?

Vue でグループ化されたリストを実装するにはどうすればよいですか?

Vue は、人気のあるフロントエンド フレームワークとして、データ処理とレンダリングを適切にサポートしています。実際のアプリケーションでは、製品カテゴリの表示や都市リストの表示など、グループ化されたリストを表示する必要がある場面によく遭遇します。では、Vue でグループ化されたリストを実装するにはどうすればよいでしょうか?以下で詳しく紹介していきましょう。

1. データ構造設計

グループ化リストを実装する前に、まずデータ構造を設計する必要があります。 Vue の実装では、通常、配列を使用してすべてのデータを保存し、グループで表示します。具体的には、オブジェクトの配列を使用してグループ化されたリストを実装できます。オブジェクト配列の各要素はデータの一部を表し、属性の 1 つはそれが属するグループを表します。例:

const data = [
  { name: '手机', category: '电子产品' },
  { name: '电视', category: '电子产品' },
  { name: '冰箱', category: '家用电器' },
  { name: '洗衣机', category: '家用电器' },
  { name: '自行车', category: '运动健身' },
  { name: '跑步机', category: '运动健身' },
]

この例では、category 属性を使用して、所属するグループを表します。

2. グループ化されたデータ処理

データ構造を設計した後、後続の表示のためにデータをグループ化する必要があります。 Vue では、computed 計算プロパティを通じてグループ化処理を実装できます。具体的には、データをグループに分類するための計算属性を定義できます。コードは次のとおりです:

computed: {
  categorizedData() {
    const result = {}
    this.data.forEach(item => {
      if (!result[item.category]) {
        result[item.category] = []
      }
      result[item.category].push(item)
    })
    return result
  }
}

この例では、categorizedData という名前の計算属性を定義し、グループに従ってデータを分類し、グループ化されたすべてのデータを含むリストを返します。その中で、空のオブジェクト result を使用して分類されたデータを保存し、すべてのデータを走査し、各データをそれが属するグループに追加します。

3. グループ リストのレンダリング

データ処理が完了したら、グループ化されたデータをページ上にレンダリングする必要があります。 Vue では、v-for ディレクティブを使用してリストのレンダリングを実装できます。具体的には、テンプレート内で 2 レベルの v-for 命令をネストして、グループ化されたデータを走査し、ページ上にレンダリングできます。コードは次のとおりです。

<template>
  <div>
    <ul v-for="(items, category) in categorizedData" :key="category">
      <li>{{ category }}</li>
      <ul>
        <li v-for="item in items" :key="item.name">{{ item.name }}</li>
      </ul>
    </ul>
  </div>
</template>

この例では、外側の層で v-for を使用して、グループ化されたデータを走査します。 # はオブジェクトの走査を表します。 の各属性と属性値。内部の v-for は、各グループのデータを走査し、それをサブリストにレンダリングするために使用されます。このようにして、グループ化されたデータをカテゴリごとにページ上に表示できます。 完全なコードは次のとおりです:

<template>
  <div>
    <ul v-for="(items, category) in categorizedData" :key="category">
      <li>{{ category }}</li>
      <ul>
        <li v-for="item in items" :key="item.name">{{ item.name }}</li>
      </ul>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { name: '手机', category: '电子产品' },
        { name: '电视', category: '电子产品' },
        { name: '冰箱', category: '家用电器' },
        { name: '洗衣机', category: '家用电器' },
        { name: '自行车', category: '运动健身' },
        { name: '跑步机', category: '运动健身' },
      ],
    }
  },
  computed: {
    categorizedData() {
      const result = {}
      this.data.forEach(item => {
        if (!result[item.category]) {
          result[item.category] = []
        }
        result[item.category].push(item)
      })
      return result
    },
  },
}
</script>

上記のコードを通じて、Vue でグループ化されたリストを実装し、グループ化に従ってページにデータを表示できます。

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