本篇文章將為大家介紹如何循環數組並在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中文網其他相關文章!