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