14 vue中v-for 循环对象数组

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