Cara melaksanakan senarai berkumpulan dalam Vue
Vue ialah rangka kerja JavaScript progresif untuk membina antara muka pengguna. Dengan kesederhanaan dan kemudahan penggunaannya, Vue telah menjadi pilihan popular dalam pembangunan bahagian hadapan. Dalam pembangunan sebenar, kita sering perlu mengelaskan dan mengumpulkan data dan memaparkannya dalam bentuk senarai pada antara muka. Artikel ini akan memperkenalkan cara untuk melaksanakan senarai berkumpulan dalam Vue dan menyediakan contoh kod khusus untuk rujukan.
Pertama sekali, kita perlu menyediakan beberapa data ujian untuk menunjukkan kesan senarai berkumpulan. Katakan kita mempunyai senarai pelajar, setiap pelajar mengandungi dua atribut: nama dan kelas. Matlamat kami adalah untuk mengumpulkan pelajar mengikut kelas, meletakkan pelajar dalam kelas yang sama dalam kumpulan yang sama.
data() { return { students: [ { name: '张三', class: '一年级一班' }, { name: '李四', class: '一年级一班' }, { name: '王五', class: '一年级二班' }, { name: '赵六', class: '一年级二班' }, { name: '钱七', class: '二年级一班' }, { name: '孙八', class: '二年级二班' }, // 其他学生... ], groups: {} // 用于存放分组后的数据 } }
Seterusnya, kita perlu menulis kod untuk mengumpulkan senarai pelajar mengikut kelas. Kumpulan data dalam fungsi cangkuk kitaran hayat mounted
Vue dan simpan hasilnya dalam objek groups
. mounted
生命周期钩子函数中进行数据的分组处理,并将结果存放在groups
对象中。
mounted() { this.groupStudents(); }, methods: { groupStudents() { this.students.forEach(student => { if (!this.groups[student.class]) { this.groups[student.class] = []; } this.groups[student.class].push(student); }); } }
在分组处理的过程中,我们使用forEach
方法遍历学生列表,并根据班级进行分组。若某班级的分组尚未创建,则创建一个空数组,然后将该学生添加到对应班级的数组中。
最后,我们通过遍历分组后的数据,展示分组列表效果。使用v-for
指令遍历groups
对象的键值对,将班级作为标题,对应的学生数组作为列表内容进行展示。
<template> <div> <div v-for="(students, class) in groups" :key="class"> <h2>{{ class }}</h2> <ul> <li v-for="student in students" :key="student.name">{{ student.name }}</li> </ul> </div> </div> </template>
在上述代码中,我们使用两次嵌套的v-for
指令,第一层遍历分组后的数据的键值对,第二层遍历班级对应的学生数组。并使用:key
rrreee
forEach
untuk melintasi senarai pelajar dan mengumpulkannya mengikut kelas. Jika kumpulan kelas tertentu belum dibuat lagi, cipta tatasusunan kosong, kemudian tambahkan pelajar itu pada tatasusunan kelas yang sepadan.
Akhir sekali, kami menunjukkan kesan senarai berkumpulan dengan merentasi data terkumpul. Gunakan perintah v-for
untuk melintasi pasangan nilai kunci objek groups
, gunakan kelas sebagai tajuk dan paparkan tatasusunan pelajar yang sepadan sebagai kandungan senarai.
Dalam kod di atas, kami menggunakan dua arahan v-for
Lapisan pertama merentasi pasangan nilai kunci data terkumpul, dan lapisan kedua melintasi Array daripada pelajar yang sepadan dengan kelas. Dan gunakan :key
untuk mengikat atribut pengenalan unik pelajar untuk meningkatkan kecekapan rendering.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai berkumpulan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!