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