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
<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>v-for Wir können auch eine Schleife durch JavaScript-Objekte durchführen, indem wir die
<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
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!
