Verwendung von V-for-Listen-Rendering-Anweisungen in Vue.js (Codebeispiel)

In diesem Artikel erfahren Sie, wie Sie ein Array schleifen und die Artikelliste rendern. vuejsIch hoffe, dass er Freunden in Not hilfreich sein wird! Die

<strong>v-for</strong>-Direktive

Vuejs stellt uns eine v-for-Direktive zum Rendern einer Liste von Elementen zur Verfügung dom. Syntax der

<strong>v-for</strong>-Direktive

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

Beispiel

<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>

Im obigen Code verwenden wir die v-for-Direktive für eine Schleife durch das users-Array, sodass in jeder Schleife die user-Variable auf ein anderes Objekt zeigt, das im Array erscheint.

<code><strong>key</strong>SchlüsselAttribut

v-forBei Verwendung der key-Direktive Wir müssen diesem Element ein vuejs-Attribut hinzufügen, da das key das Listenelement basierend auf dem bereitgestellten

verfolgen muss.

Hinweis: Der Schlüssel sollte eindeutig sein

Fügen wir das Schlüsselattribut zur Vorlage hinzu.

<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>

usersIm Array key ist das id-Attribut für jedes Objekt eindeutig, daher übergeben wir es an das Attribut

.

Wir können auch auf den Index jedes Elements im Array zugreifen.

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

Iterieren über Objekte

v-for Wir können auch eine Schleife durch JavaScript-Objekte durchführen, indem wir die

-Direktive verwenden.

<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 Hinweis: Im Objekt müssen wir zuerst key und dann

extrahieren.

In diesem Artikel geht es um die Verwendung von V-for-Listen-Rendering-Anweisungen in Vue.js. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonVerwendung von V-for-Listen-Rendering-Anweisungen in Vue.js (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!