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

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

藏色散人

Libérer： 2019-03-30 09:58:09

original

3266 Les gens l'ont consulté

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 !

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

v-for directive

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

v-for Syntaxe de la directive

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

Copier après la connexion

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>

Copier après la connexion

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.

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

<code>keyclé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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

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!