So implementieren Sie gruppierte Listen in Vue
Vue ist ein fortschrittliches JavaScript-Framework zum Erstellen von Benutzeroberflächen. Aufgrund seiner Einfachheit und Benutzerfreundlichkeit ist Vue zu einer beliebten Wahl in der Front-End-Entwicklung geworden. In der tatsächlichen Entwicklung müssen wir häufig Daten klassifizieren, gruppieren und in Listenform auf der Benutzeroberfläche anzeigen. In diesem Artikel wird die Implementierung gruppierter Listen in Vue vorgestellt und spezifische Codebeispiele als Referenz bereitgestellt.
Zuerst müssen wir einige Testdaten vorbereiten, um die Wirkung gruppierter Listen zu zeigen. Angenommen, wir haben eine Liste von Schülern. Jeder Schüler enthält zwei Attribute: Name und Klasse. Unser Ziel ist es, die Schüler nach Klassen zu gruppieren und sie derselben Klasse innerhalb derselben Gruppe zuzuordnen.
data() { return { students: [ { name: '张三', class: '一年级一班' }, { name: '李四', class: '一年级一班' }, { name: '王五', class: '一年级二班' }, { name: '赵六', class: '一年级二班' }, { name: '钱七', class: '二年级一班' }, { name: '孙八', class: '二年级二班' }, // 其他学生... ], groups: {} // 用于存放分组后的数据 } }
Als nächstes müssen wir Code schreiben, um die Schülerliste nach Klasse zu gruppieren. Gruppieren Sie Daten in der Lebenszyklus-Hook-Funktion mount
von Vue und speichern Sie die Ergebnisse im Objekt 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
, um die Schülerliste zu durchlaufen und sie nach Klasse zu gruppieren. Wenn die Gruppe einer bestimmten Klasse noch nicht erstellt wurde, erstellen Sie ein leeres Array und fügen Sie dann den Schüler zum Array der entsprechenden Klasse hinzu.
Abschließend zeigen wir den Effekt der gruppierten Liste, indem wir die gruppierten Daten durchlaufen. Verwenden Sie den Befehl v-for
, um die Schlüssel-Wert-Paare des Objekts groups
zu durchlaufen, die Klasse als Titel zu verwenden und das entsprechende Schülerarray als Listeninhalt anzuzeigen.
Im obigen Code verwenden wir zwei verschachtelte v-for
-Anweisungen. Die erste Ebene durchläuft die Schlüssel-Wert-Paare der gruppierten Daten und die zweite Ebene durchläuft das der Klasse entsprechende Schülerarray . Und verwenden Sie :key
, um das eindeutige Identifikationsattribut des Schülers zu binden und so die Rendering-Effizienz zu verbessern.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie gruppierte Listen in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!