Utilisation des instructions de rendu de liste v-for dans Vue.js (exemple de code)

Cet article vous présentera comment boucler un tableau et afficher une liste d'éléments dans vuejs. J'espère qu'il sera utile aux amis dans le besoin !

<strong>v-for</strong> directive

Vuejs nous fournit une directive v-for pour afficher une liste d'éléments Aller à dom.

<strong>v-for</strong> Syntaxe de la directive

v-for="user in users"
<!-- user variable is iterator -->
<!--users is data array-->

Exemple

<template>
 <ul>
   <!-- list rendering starts -->
  <li v-for="user in users">{{user.name}}</li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

Dans le code ci-dessus, on utilise v-for L'instruction parcourt le tableau users de sorte que dans chaque boucle, la variable user pointe vers un objet différent qui apparaît dans le tableau.

<code><strong>key</strong>cléattribut

v-forLors de l'utilisation de la directive key, Nous devons ajouter un attribut vuejs à cet élément car le key doit suivre l'élément de liste en fonction du

fourni.

Remarque : la clé doit être unique.

Ajoutons l'attribut clé au modèle.

<template>
 <ul>
  <li v-for="user in users" :key="user.id">
    {{user.name}}
  </li>
 </ul>
</template>

<script>
 export default{
     data:function(){
         return{
             users:[
                 {id:1,name:"king"},
                 {id:2,name:"gowtham"},
                 {id:3,name:"ooops"},
             ]
         }
     }
 }
</script>

usersDans le tableau key, l'attribut id est unique à chaque objet, nous le transmettons donc à l'attribut

.

Nous pouvons également accéder à l'index de chaque élément du tableau.

<template>
<ul>
  <li v-for="(user,index) in users" :key="user.id">
    {{user.name}} {{index}}
  </li>
 </ul>
</template>

Itération sur des objets

v-for Nous pouvons également parcourir des objets JavaScript en utilisant la directive

.

<template>
  <ul>
    <!-- accessing `value and key` present in person object -->
    <li v-for="(value, key) in person" :key="key">
      {{key}} : {{ value }}
    </li>
  </ul>
</template>

<script>
export default {
  data: function() {
    return {
      person: {
        firstName: "Rim",
        lastName: "Doe",
        age: 20,
        eyeColor: "blue"
      }
    };
  }
};
</script>

value Remarque : Dans l'objet, nous devons d'abord extraire key, puis

.

Cet article est une introduction à l'utilisation des instructions de rendu de liste v-for dans Vue.js. J'espère qu'il sera utile aux amis dans le besoin !

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!