本篇文章將為大家介紹如何循環數組並在vuejs渲染項目列表，希望對需要的朋友有所幫助！
<strong>v-for</strong>#指令
Vuejs為我們提供了一個v-for指令，用於將項目清單渲染到dom。
<strong>v-for</strong>指令的語法
v-for="user in users" <!-- user variable is iterator --> <!--users is data array-->
範例
<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>在上面的程式碼中，我們使用v-for指令循環遍歷users數組，這樣在每次循環中user變數都指向數組中出現的不同物件。
<strong>key</strong>#屬性
當使用v-for指令時，我們需要在該元素上新增一個key屬性，因為vuejs需要根據提供的key追蹤清單項目。
注意:金鑰應該是唯一的
讓我們將key屬性加入到範本中。
<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>在users陣列中，id屬性對每個物件都是唯一的，因此我們將它傳遞給key屬性。
我們也可以存取陣列中每個項目的索引。
<template>
<ul>
<li v-for="(user,index) in users" :key="user.id">
{{user.name}} {{index}}
</li>
</ul>
</template>遍歷物件
我們也可以透過使用v-for指令循環JavaScript物件物件。
<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，然後是key。
這篇文章就是關於Vue.js中v-for列表渲染指令的使用介紹，希望對需要的朋友有幫助！
以上是Vue.js中v-for列表渲染指令的使用（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
