Bagaimana untuk melaksanakan senarai berkumpulan dalam Vue

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.

1. Penyediaan data

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: {} // 用于存放分组后的数据
  }
}

2. Pemprosesan kumpulan

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方法遍历学生列表，并根据班级进行分组。若某班级的分组尚未创建，则创建一个空数组，然后将该学生添加到对应班级的数组中。

3. 列表展示

最后，我们通过遍历分组后的数据，展示分组列表效果。使用v-for指令遍历groups对象的键值对，将班级作为标题，对应的学生数组作为列表内容进行展示。

<template>
  <div>
    <div v-for="(students, class) in groups" :key="class">
      <h2 id="class">{{ class }}</h2>
      <ul>
        <li v-for="student in students" :key="student.name">{{ student.name }}</li>
      </ul>
    </div>
  </div>
</template>

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

Semasa proses pengumpulan, kami menggunakan kaedah 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.

Paparan senarai

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.

rrreee

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.

#🎜🎜#Pada ketika ini, kami telah menyelesaikan proses melaksanakan senarai berkumpulan dalam Vue. Kini, kita boleh memaparkan senarai pelajar berkumpulan dalam aplikasi Vue dan membentangkannya dalam bentuk kumpulan. #🎜🎜##🎜🎜#Ringkasan#🎜🎜##🎜🎜#Artikel ini memperkenalkan cara untuk melaksanakan senarai berkumpulan dalam Vue dan menyediakan contoh kod khusus. Melalui tiga langkah penyediaan data, pemprosesan kumpulan dan paparan senarai, kami boleh melaksanakan fungsi senarai berkumpulan dengan mudah. #🎜🎜##🎜🎜# Saya harap artikel ini dapat membantu anda dan memberi anda sedikit rujukan apabila anda menghadapi masalah dengan senarai berkumpulan dalam pembangunan Vue. Saya doakan anda berjaya dengan projek Vue anda! #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan senarai berkumpulan dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!