vue 列表渲染

要点：

 

 

 

v-for：

v-for=“p in persons” 

persons表示数组数据 p表示形参  

当persons里面有多少个数据就会生成多少个li

这边使用插值属性直接来显示数组中的数据

使用p ，插值key可以来自data里面的属性也可以来则计算属性也可以来自方法的返回值等等

这边时来自形参

 

只需要部分

 

 

 

 

但还缺少key

相当于每个人的唯一标识所以key一定要不一样要加冒号！！！！！

我们通过显示v-for输出的东西

 

 

 

所以不难看出 c没有说明没有定义 所以第一个为数组的元素值第二个为索引值

所以两种写法第一种因为我们设定的id唯一所以第一种写法：

v-for="(p,index) in persons " :key="p.id"

第二种写法,因为索引也唯一 所以:key="index"

v-for=“(p,index) in persons” :key="index"

注：这边 in也可以替换成of

注：

不光可以遍历数组类型还可以遍历对象类型

对象类型

所以第一个为value第二个为key

 

 

 

字符串类型

 

 

 

 遍历指定次数：

 

 

总结：