Comment implémenter des listes groupées dans Vue

Comment implémenter des listes groupées dans Vue

Vue est un framework JavaScript progressif pour créer des interfaces utilisateur. Grâce à sa simplicité et sa facilité d'utilisation, Vue est devenu un choix populaire dans le développement front-end. Dans le développement réel, nous avons souvent besoin de classer et de regrouper les données et de les afficher sous forme de liste sur l'interface. Cet article expliquera comment implémenter des listes groupées dans Vue et fournira des exemples de code spécifiques pour référence.

1. Préparation des données

Tout d'abord, nous devons préparer des données de test pour montrer l'effet des listes groupées. Supposons que nous ayons une liste d'étudiants, chaque étudiant contient deux attributs : le nom et la classe. Notre objectif est de regrouper les étudiants par classe, en plaçant les étudiants dans la même classe au sein d'un même groupe.

data() {
  return {
    students: [
      { name: '张三', class: '一年级一班' },
      { name: '李四', class: '一年级一班' },
      { name: '王五', class: '一年级二班' },
      { name: '赵六', class: '一年级二班' },
      { name: '钱七', class: '二年级一班' },
      { name: '孙八', class: '二年级二班' },
      // 其他学生...
    ],
    groups: {} // 用于存放分组后的数据
  }
}

2. Traitement de groupe

Ensuite, nous devons écrire du code pour regrouper la liste des étudiants par classe. Regroupez les données dans la fonction hook de cycle de vie Mounted de Vue et stockez les résultats dans l'objet 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方法遍历学生列表，并根据班级进行分组。若某班级的分组尚未创建，则创建一个空数组，然后将该学生添加到对应班级的数组中。

3. 列表展示

最后，我们通过遍历分组后的数据，展示分组列表效果。使用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指令，第一层遍历分组后的数据的键值对，第二层遍历班级对应的学生数组。并使用:keyrrreee

Affichage de liste

Enfin, nous montrons l'effet de liste groupée en parcourant les données groupées. Utilisez la commande v-for pour parcourir les paires clé-valeur de l'objet groups, utilisez la classe comme titre et affichez le tableau d'étudiant correspondant comme contenu de la liste.

rrreee

Dans le code ci-dessus, nous utilisons deux instructions v-for imbriquées. Le premier niveau parcourt les paires clé-valeur des données groupées et le deuxième niveau parcourt le tableau étudiant correspondant à la classe. . Et utilisez :key pour lier l'attribut d'identification unique de l'élève afin d'améliorer l'efficacité du rendu.

🎜À ce stade, nous avons terminé le processus d'implémentation de listes groupées dans Vue. Désormais, nous pouvons afficher la liste des étudiants regroupés dans l'application Vue et la présenter sous forme de groupes. 🎜🎜Résumé🎜🎜Cet article présente comment implémenter des listes groupées dans Vue et fournit des exemples de code spécifiques. Grâce aux trois étapes de préparation des données, de traitement du regroupement et d'affichage de la liste, nous pouvons facilement mettre en œuvre la fonction de liste groupée. 🎜🎜J'espère que cet article pourra vous aider et vous donner des références lorsque vous rencontrez des problèmes avec les listes groupées dans le développement de Vue. Je vous souhaite du succès dans vos projets Vue ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!