Bagaimana untuk melaksanakan senarai berkumpulan dalam Vue?

Bagaimana untuk melaksanakan senarai berkumpulan dalam Vue?

Vue, sebagai rangka kerja bahagian hadapan yang popular, mempunyai sokongan yang baik untuk pemprosesan dan pemaparan data. Dalam aplikasi sebenar, kami sering menghadapi situasi di mana kami perlu memaparkan senarai berkumpulan, seperti memaparkan kategori produk, memaparkan senarai bandar, dsb. Jadi, bagaimana untuk melaksanakan senarai berkumpulan dalam Vue? Mari perkenalkan secara terperinci di bawah.

1. Reka bentuk struktur data

Sebelum melaksanakan senarai berkumpulan, kita perlu mereka bentuk struktur data terlebih dahulu. Dalam pelaksanaan Vue, kami biasanya menggunakan tatasusunan untuk menyimpan semua data dan memaparkannya dalam kumpulan. Secara khusus, kita boleh menggunakan tatasusunan objek untuk melaksanakan senarai berkumpulan. Setiap elemen dalam tatasusunan objek mewakili sekeping data dan salah satu atribut mewakili kumpulan yang dimilikinya, seperti:

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

Dalam contoh ini, kami menggunakan atribut category untuk mewakili kumpulan ia kepunyaan. 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 指令来实现列表渲染。具体来说，我们可以在模板中嵌套两层 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 来遍历分组数据，其中 (items, category) in categorizedData 表示遍历对象中的每个属性和属性值。内层的 v-for

Pemprosesan data berkumpulan

Selepas mereka bentuk struktur data, kami perlu mengumpulkan data untuk paparan seterusnya. Dalam Vue, kami boleh melaksanakan pemprosesan pengelompokan melalui sifat pengiraan computed. Secara khusus, kita boleh menentukan atribut yang dikira untuk mengklasifikasikan data ke dalam kumpulan. Kodnya adalah seperti berikut:

<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>

Salin selepas log masuk
🎜Dalam contoh ini, kami mentakrifkan sifat terkira bernama categorizedData, yang akan mengelaskan data kepada kumpulan dan mengembalikan objek yang mengandungi semua data terkumpul. Antaranya, kami menggunakan objek kosong hasil untuk menyimpan data terperingkat, merentasi semua data dan menambah setiap data pada kumpulan yang mana ia berada. 🎜
🎜Penyampaian senarai kumpulan🎜🎜🎜Selepas pemprosesan data selesai, kami perlu memaparkan data terkumpul ke halaman. Dalam Vue, kita boleh menggunakan arahan v-for untuk melaksanakan pemaparan senarai. Secara khusus, kita boleh menyusun dua peringkat arahan v-for dalam templat untuk melintasi data terkumpul dan menjadikannya pada halaman. Kodnya adalah seperti berikut: 🎜rrreee🎜Dalam contoh ini, kami menggunakan v-for di lapisan luar untuk melintasi data terkumpul, dengan (item, kategori) dalam categorizedData bermakna melintasi objek Setiap atribut dan nilai atribut. v-for dalam digunakan untuk mengulang setiap data terkumpul dan menjadikannya subsenarai. Dengan cara ini, kami boleh memaparkan data terkumpul pada halaman mengikut kategori. 🎜🎜Kod lengkap adalah seperti berikut: 🎜rrreee🎜Dengan kod di atas, kami boleh melaksanakan senarai berkumpulan dalam Vue dan memaparkan data pada halaman mengikut kumpulan. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai berkumpulan dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!