Heim > Web-Frontend > View.js > Hauptteil

So implementieren Sie gruppierte Listen in Vue

王林
Freigeben: 2023-11-07 14:06:16
Original
1451 Leute haben es durchsucht

So implementieren Sie gruppierte Listen in Vue

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.

  1. Datenvorbereitung

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: {} // 用于存放分组后的数据
  }
}
Nach dem Login kopieren
  1. Gruppenverarbeitung

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);
    });
  }
}
Nach dem Login kopieren

在分组处理的过程中,我们使用forEach方法遍历学生列表,并根据班级进行分组。若某班级的分组尚未创建,则创建一个空数组,然后将该学生添加到对应班级的数组中。

  1. 列表展示

最后,我们通过遍历分组后的数据,展示分组列表效果。使用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>
Nach dem Login kopieren

在上述代码中,我们使用两次嵌套的v-for指令,第一层遍历分组后的数据的键值对,第二层遍历班级对应的学生数组。并使用:keyrrreee

Während des Gruppierungsprozesses verwenden wir die Methode 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.

    Listenanzeige

    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.

    rrreee

    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.

    🎜Zu diesem Zeitpunkt haben wir den Prozess der Implementierung gruppierter Listen in Vue abgeschlossen. Jetzt können wir die gruppierte Studentenliste in der Vue-Anwendung anzeigen und in Form von Gruppen präsentieren. 🎜🎜Zusammenfassung🎜🎜Dieser Artikel stellt die Implementierung gruppierter Listen in Vue vor und bietet spezifische Codebeispiele. Durch die drei Schritte Datenvorbereitung, Gruppierungsverarbeitung und Listenanzeige können wir die gruppierte Listenfunktion problemlos implementieren. 🎜🎜Ich hoffe, dieser Artikel kann Ihnen helfen und Ihnen Hinweise geben, wenn Sie in der Vue-Entwicklung auf Probleme mit gruppierten Listen stoßen. Ich wünsche Ihnen viel Erfolg mit Ihren Vue-Projekten! 🎜

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!