Rumah > Artikel > hujung hadapan web > 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.
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
属性来表示所属的分组。
在设计好数据结构后,我们需要对数据进行分组处理,以便于后续的展示。在 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
来存储分类后的数据,遍历所有数据,将每个数据加入到其所属的分组中。
在数据处理完成后,我们需要将分组数据渲染到页面上。在 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
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>🎜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. 🎜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!