Comment utiliser v-for pour parcourir des tableaux ou des objets dans Vue

Vue.js est un framework JavaScript flexible qui permet aux développeurs de créer plus facilement des applications Web interactives. Dans Vue, nous pouvons utiliser la directive v-for pour parcourir un tableau ou un objet et générer les éléments HTML correspondants.

Itération de tableau

Dans Vue.js, nous pouvons parcourir un tableau en utilisant la directive v-for. Voici un exemple simple :

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

<script>
export default {
  data() {
    return {
      items: ["apple", "banana", "orange"],
    };
  },
};
</script>

Dans l'exemple ci-dessus, l'instruction v-for parcourt le tableau items. L'élément et l'index dans l'instruction représentent respectivement chaque élément du tableau et son indice dans le tableau. Remarque : Pour éviter les avertissements en double, nous devons spécifier une clé unique à l'aide de l'attribut :key (dans ce cas, nous utilisons l'index du tableau comme clé).

Itération d'objets

En plus d'itérer des tableaux, Vue.js nous permet également d'itérer des objets. Voici un exemple simple :

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

<script>
export default {
  data() {
    return {
      object: {
        name: "Tom",
        age: 18,
        hobby: "swimming",
      },
    };
  },
};
</script>

Dans l'exemple ci-dessus, l'instruction v-for parcourt l'objet objet. La valeur et la clé dans l'instruction représentent respectivement chaque valeur et sa clé correspondante dans l'objet. Comme pour l'itération de tableau, nous devons spécifier une clé unique en utilisant :key (dans ce cas, nous utilisons la clé de l'objet comme clé).

Résumé

La directive v-for de Vue.js facilite l'itération sur des tableaux ou des objets. Que ce soit lors d'une itération sur un tableau ou un objet, nous devons spécifier une clé unique en utilisant :key pour éviter la duplication.

J'espère que cet article vous sera utile et bon codage !

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!