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

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

藏色散人

Freigeben： 2019-03-30 09:58:09

Original

3305 Leute haben es durchsucht

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

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

v-for-Direktive

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

v-for-Direktive

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

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

<code>keySchlü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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

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!