Comment utiliser l'instruction v-for pour boucler les données de sortie dans Vue

Vue est un framework frontal populaire qui fournit de nombreuses directives puissantes pour gérer facilement les vues et les données. L'une des instructions les plus couramment utilisées est v-for, qui peut parcourir les données et les générer. Dans cet article, nous apprendrons comment parcourir les données à l'aide de la directive v-for dans Vue.

Tout d’abord, jetons un coup d’œil à l’utilisation de v-for. La syntaxe de base est la suivante :

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
</template>

Dans le code ci-dessus, nous utilisons l'instruction v-for pour parcourir les données du tableau list et les afficher sous forme li éléments. L'instruction v-for se compose de trois parties : v-for="(item, index) in list". Parmi eux, (item, index) est l'élément et l'index définis, qui peuvent être modifiés en fonction des besoins. list est le tableau de données en boucle. v-for指令将list数组中的数据循环遍历，并输出为li元素。v-for指令由三部分组成：v-for="(item, index) in list"。其中，(item, index) 是定义的项和索引，可以根据需求自行更改。list 是被循环的数据数组。

key

L'attribut key est obligatoire et doit être unique. Il est utilisé par Vue pour identifier les éléments DOM afin de rendre les composants plus rapidement. Vue avertira si l'attribut key n'est pas défini, alors assurez-vous de définir l'attribut key.

Ensuite, examinons quelques exemples spécifiques pour montrer comment utiliser l'instruction v-for pour boucler les données dans Vue.

1. Parcourez le tableau et affichez une liste

Dans cet exemple, nous utiliserons l'instruction v-for pour parcourir un tableau et l'afficher sous forme de liste. Dans cet exemple, nous utilisons l'opérateur spread dans ES6 pour répartir le tableau.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['foo', 'bar', 'baz']
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons créé un tableau et l'avons transmis à la propriété data de l'instance Vue. Ensuite, nous utilisons la directive v-for pour parcourir chaque élément du tableau et le restituer sous forme de liste.

2. Parcourez l'objet et affichez une liste

Dans cet exemple, nous utiliserons l'instruction v-for pour parcourir un objet et l'afficher sous forme de liste. Nous avons utilisé la clé et la valeur dans l'objet pour afficher les éléments de la liste et définir la propriété key sur le nom de la clé.

<template>
  <div>
    <ul>
      <li v-for="(value, key, index) in obj" :key="key">{{ key }} - {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        foo: 'Foo',
        bar: 'Bar',
        baz: 'Baz'
      }
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons créé un objet et l'avons transmis à la propriété data de l'instance Vue. Nous utilisons ensuite la directive v-for pour parcourir chaque paire clé-valeur de l'objet et les restituer sous forme de liste.

3. Parcourez les nombres et affichez une liste

Dans cet exemple, nous utiliserons l'instruction v-for pour parcourir un nombre et le générer sous forme de liste. Dans v-for, nous bouclons les nombres dans un tableau, puis comptons en utilisant l'index de l'élément dans le tableau.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in 5" :key="index">{{ index + 1 }}</li>
    </ul>
  </div>
</template>

Dans l'exemple ci-dessus, nous utilisons l'instruction v-for pour boucler les nombres dans un tableau de longueur 5 et le générer sous forme de liste. Nous utilisons la variable index pour compter et l'ajoutons à 1 pour obtenir le numéro de séquence.

4. Parcourez le tableau et génèrez un tableau

Dans cet exemple, nous utiliserons l'instruction v-for pour parcourir un tableau et le générer sous forme de tableau HTML. Nous avons utilisé des propriétés calculées pour diviser le tableau imbriqué en éléments de données individuels.

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in flattenedList" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: 'Alice', age: 22, gender: 'Female' },
        { name: 'Bob', age: 25, gender: 'Male' },
        { name: 'Charlie', age: 30, gender: 'Male' },
        { name: 'Diana', age: 27, gender: 'Female' }
      ]
    }
  },
  computed: {
    flattenedList() {
      return this.list.flatMap(item => [item.name, item.age, item.gender])
    }
  }
}
</script>

Dans l'exemple ci-dessus, nous avons créé un tableau de quatre objets et l'avons transmis à la propriété data de l'instance Vue. Nous le divisons ensuite dans une propriété calculée, convertissant les éléments de données imbriqués en un seul élément de données. Ensuite, nous utilisons la directive v-for pour parcourir le nouveau tableau et le restituer sous forme de tableau HTML.

Résumé

Dans Vue, il est très simple d'utiliser l'instruction v-for pour boucler les données. Il vous suffit de suivre la syntaxe de base et, armé des bonnes données, vous pouvez commencer à créer des modèles complexes. Que vous parcouriez un tableau simple ou une structure de données imbriquée plus complexe, la directive v-for peut vous aider à les gérer. 🎜

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!