Vue3.0学习 (8)- v-for列表渲染

tech2024-10-17  14

实例

1、v-for 遍历集合、对象:

<ul> <li v-for="item,index in titles">{{item}}{{index}}</li> </ul> <ul> <li v-for="value,key,index of book">{{key}}:{{value}}:{{index}}</li> </ul>

2、声明变量

const titles = ['汽修','长哥','藏剑'] const book={ title:'百年孤独', author:'马尔克斯', pubdata:'2000' } 要点

1、值和索引位置固定 (与 v-for 后面的变量名无关)

遍历集合时为 :数值 + 索引

当 v-for 后面只有一个变量时,则变量为数值; 当 v-for 后面有两个变量时,则为数值+索引;

遍历对象时为 :数据 + 字段名 + 索引

当 v-for 后面只有一个变量时,则变量为数值; 当 v-for 后面有两个变量时,则为数据 + 字段名 + 索引; 当 v-for 后面有三个变量时,则为数据 + 字段名 + 索引。

2、v-for放的位置,放在ul上循环ul,放在li上循环li

放在 li: 放在ul上

3、in 可以用of代替

最新回复(0)