Comment utiliser v-for pour afficher une liste dans Vue

Vue est un framework JavaScript populaire pour créer des interfaces utilisateur. Lorsque vous devez restituer une liste ou un tableau dans Vue, vous pouvez utiliser la directive v-for. La directive v-for est l'outil principal pour la boucle et le rendu des listes dans Vue. Elle peut être utilisée pour parcourir les propriétés d'un tableau ou d'un objet et restituer un modèle pour chaque élément de données.

L'utilisation de la commande v-for est très simple. Il vous suffit d'ajouter l'instruction v-for aux éléments qui doivent être parcourus, suivie du nom de la variable à boucler, pour obtenir un rendu en boucle, par exemple :

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Dans cet exemple, utilisez l'instruction v-for pour le tableau d'éléments Traverse, génère une liste de balises li et affiche chaque élément de données du tableau dans chaque balise li.

En plus de parcourir des tableaux, l'instruction v-for peut également être utilisée pour parcourir les propriétés d'un objet, par exemple :

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

Ce code affichera toutes les propriétés de l'objet objet et affichera le nom et la valeur de la propriété dans la balise li.

Lorsque vous utilisez l'instruction v-for, vous pouvez également contrôler le comportement de la boucle en ajoutant des paramètres supplémentaires, tels que :

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

Dans cet exemple, un paramètre index supplémentaire est ajouté pour afficher la valeur d'index de la boucle.

La directive v-for peut également être utilisée avec la directive v-if pour filtrer et restituer en fonction des conditions. Par exemple :

<ul>
  <li v-for="item in items" v-if="item !== 'apple'">{{ item }}</li>
</ul>

Dans cet exemple, l'élément li sera rendu uniquement si item n'est pas égal à « pomme ».

En général, l'instruction v-for est une fonction très pratique dans Vue, qui peut nous aider à parcourir facilement la liste de rendu et à obtenir l'effet d'affichage dynamique des données. Maîtriser l'utilisation de l'instruction v-for peut nous permettre de développer des applications Vue plus efficacement.

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!