Comment implémenter des listes groupées dans Vue ?

Comment implémenter des listes groupées dans Vue ?

Vue, en tant que framework frontal populaire, prend en charge le traitement et le rendu des données. Dans les applications réelles, nous rencontrons souvent des situations où nous devons afficher des listes groupées, comme l'affichage de catégories de produits, l'affichage de listes de villes, etc. Alors, comment implémenter des listes groupées dans Vue ? Présentons-le en détail ci-dessous.

1. Conception de la structure des données

Avant de mettre en œuvre la liste groupée, nous devons d'abord concevoir la structure des données. Dans l'implémentation de Vue, nous utilisons généralement un tableau pour stocker toutes les données et les afficher en groupes. Plus précisément, nous pouvons utiliser un tableau d'objets pour implémenter des listes groupées. Chaque élément du tableau d'objets représente une donnée, et l'un des attributs représente le groupe auquel il appartient, comme :

const data = [
  { name: '手机', category: '电子产品' },
  { name: '电视', category: '电子产品' },
  { name: '冰箱', category: '家用电器' },
  { name: '洗衣机', category: '家用电器' },
  { name: '自行车', category: '运动健身' },
  { name: '跑步机', category: '运动健身' },
]

Dans cet exemple, nous utilisons l'attribut category pour représenter le groupe. il appartient. category 属性来表示所属的分组。

2. 分组数据处理

在设计好数据结构后，我们需要对数据进行分组处理，以便于后续的展示。在 Vue 中，我们可以通过 computed 计算属性来实现分组处理。具体来说，我们可以定义一个计算属性，将数据按照分组进行归类。代码如下：

computed: {
  categorizedData() {
    const result = {}
    this.data.forEach(item => {
      if (!result[item.category]) {
        result[item.category] = []
      }
      result[item.category].push(item)
    })
    return result
  }
}

在这个例子中，我们定义了一个名为 categorizedData 的计算属性，该属性会将数据按照分组进行归类，返回一个包含所有分组数据的对象。其中，我们使用了一个空对象 result 来存储分类后的数据，遍历所有数据，将每个数据加入到其所属的分组中。

3. 分组列表渲染

在数据处理完成后，我们需要将分组数据渲染到页面上。在 Vue 中，我们可以使用 v-for 指令来实现列表渲染。具体来说，我们可以在模板中嵌套两层 v-for 指令，遍历分组数据并渲染到页面上。代码如下：

<template>
  <div>
    <ul v-for="(items, category) in categorizedData" :key="category">
      <li>{{ category }}</li>
      <ul>
        <li v-for="item in items" :key="item.name">{{ item.name }}</li>
      </ul>
    </ul>
  </div>
</template>

在这个例子中，我们在外层使用 v-for 来遍历分组数据，其中 (items, category) in categorizedData 表示遍历对象中的每个属性和属性值。内层的 v-for

Traitement des données groupées

Après avoir conçu la structure des données, nous devons regrouper les données pour un affichage ultérieur. Dans Vue, nous pouvons implémenter le traitement de regroupement via des propriétés calculées calculées. Plus précisément, nous pouvons définir un attribut calculé pour classer les données en groupes. Le code est le suivant :

<template>
  <div>
    <ul v-for="(items, category) in categorizedData" :key="category">
      <li>{{ category }}</li>
      <ul>
        <li v-for="item in items" :key="item.name">{{ item.name }}</li>
      </ul>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        { name: '手机', category: '电子产品' },
        { name: '电视', category: '电子产品' },
        { name: '冰箱', category: '家用电器' },
        { name: '洗衣机', category: '家用电器' },
        { name: '自行车', category: '运动健身' },
        { name: '跑步机', category: '运动健身' },
      ],
    }
  },
  computed: {
    categorizedData() {
      const result = {}
      this.data.forEach(item => {
        if (!result[item.category]) {
          result[item.category] = []
        }
        result[item.category].push(item)
      })
      return result
    },
  },
}
</script>

Copier après la connexion
🎜Dans cet exemple, nous définissons une propriété calculée nommée categorizedData, qui classera les données en groupes et renverra un objet contenant toutes les données regroupées. Parmi eux, nous utilisons un objet vide result pour stocker les données classifiées, parcourir toutes les données et ajouter chaque donnée au groupe auquel elle appartient. 🎜
🎜Rendu de liste de groupes🎜🎜🎜Une fois le traitement des données terminé, nous devons restituer les données groupées sur la page. Dans Vue, nous pouvons utiliser la directive v-for pour implémenter le rendu de liste. Plus précisément, nous pouvons imbriquer deux niveaux de directives v-for dans le modèle pour parcourir les données groupées et les restituer sur la page. Le code est le suivant : 🎜rrreee🎜Dans cet exemple, nous utilisons v-for dans la couche externe pour parcourir les données groupées, où (items,category) dans categorizedData signifie parcourir les objets Chaque attribut et valeur d'attribut. Le v-for interne est utilisé pour parcourir chaque donnée groupée et la restituer dans une sous-liste. De cette manière, nous pouvons afficher des données regroupées sur la page selon des catégories. 🎜🎜Le code complet est le suivant : 🎜rrreee🎜Avec le code ci-dessus, nous pouvons implémenter la liste groupée dans Vue et afficher les données sur la page en fonction des groupes. 🎜

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!