vue中的v-for 循環對象數組。循環的主體不會變 ，主要模式還是
<p v-for="item in list">{{item}}</p>
data如下
data: {
list: [
{ id: 1, name: 'zs1' },
{ id: 2, name: 'zs2' },
{ id: 3, name: 'zs3' },
{ id: 4, name: 'zs4' }
]
},
刻意知道list數組中，不是單純地 數字，而是 每一個對象。所以
<p v-for="item in list">{{item}}</p> 循環得到結果是：
{ "id": 1, "name": "zs1" }
{ "id": 2, "name": "zs2" }
{ "id": 3, "name": "zs3" }
{ "id": 4, "name": "zs4" }
按照要求來說。我們通常項目中， 會拿到對象中單獨的每一個屬性。 獲取某個屬性的屬性值，滿足需求。所以可以操作為
<p v-for=" (item , i ) in list"> id是 {{item.id}} </p>
需要注意的是以下的對比問題和對應結
1.<p v-for=" (item , i ) in list"> ' id是'+{{item.id}} </p>
2.<p v-for=" (item , i ) in list"> id是 '+' {item.id}} </p>
3.<p v-for=" (item , i ) in list"> id是 {{item.id}} </p>
結果分別是
1.
' id是'+1
' id是'+2
i2.
d是 '+' {item.id}}
id是 '+' {item.id}}
3.
id是 1
id是 2
通過顯示情況。我們知道。 第三種才是我們最需要的方式
<p v-for=" (item , i ) in list"> id是 {{item.id}} --名字 {{item.name}} -- 索引是 {{i}}</p>
呈現結果
id是 1 --名字 zs1 -- 索引是 0
id是 2 --名字 zs2 -- 索引是 1
id是 3 --名字 zs3 -- 索引是 2
id是 4 --名字 zs4 -- 索引是 3