Vue.js入門筆記 v-for循環
- 2019 年 12 月 24 日
- 筆記
可以用 v-for
指令基於一個數組來渲染一個列表。v-for
指令需要使用 item in items
形式的特殊語法,其中 items
是源數據數組,而 item
則是被迭代的數組元素的別名。
v-for 循環普通數組
<div id="app"> <p v-for="(item, i) in data"> 索引是{{ i }} --- 內容是{{ item }} </p> </div> js: data : { data : [1,2,3,4,5], },
v-for 循環對象數組
<div id="app"> <p v-for="(item, i) in data1"> 索引是:{{ i }} -- - 內容是{{ item.id }}--{{ item.name }} </p> </div> js: data: { data1: [ { id: 1, name: "name1" }, { id: 2, name: "name2" }, { id: 3, name: "name3" } ] },
v-for 循環對象
<div id="app"> <p v-for="(data, key, i) in user"> 索引:{{ i }},鍵值:{{ key }},內容:{{ data }} </p> </div> js: data: { user: { id: 1, name: "tim", age: 18, width: 200 } },
v-for 迭代數字
<div id="app"> <p v-for="count in 10">{{ count }}</p> </div>
2.2.0+ 的版本里,當在組件上使用
v-for
時,key
現在是必須的。
不自動將 item
注入到組件里的原因是,這會使得組件與 v-for
的運作緊密耦合。明確組件數據的來源能夠使組件在其他場合重複使用。