v-for的四种使用方式
1、数组
在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。
(1)先在data中定义数组
arr: [1, 2, 3, 4, 5],
(2)在标签中遍历
<p v-for="(item,index) in arr">数值:{{item}},索引:{{index}}</p>
2、在对象数组
对象数组,其实说到底也是数组,使用方式上和数组一模一样。
(1)先在data中定义数组
objArr: [{
id: 1,
name: "Q"
},
{
id: 2,
name: "W"
},
{
id: 3,
name: "E"
},
{
id: 4,
name: "R"
},
],
(2)在标签中遍历
<p v-for="item in objArr">id:{{item.id}}--------name:{{item.name}}</p>
3、对象
对象不同于数组,遍历的大多数是关键字和值,即key和val,虽然对象也有索引值,但是一般都用不到。
(1)先在data中定义对象
obj: {
id: "100",
name: "qwer",
sex: "male"
}
(2)在标签内遍历
<p v-for="(val,key,i) in obj">值:{{val}},键:{{key}},索引:{{i}}</p>
4、迭代数字
和数组、对象数组、对象不同的是,迭代数字更加纯粹,看起来更像是为了循环而循环,不需要任何定义,直接在标签中使用,并且count是从1开始的。
<p v-for="count in 10">这是第{{count}}次循环</p>
总结
v-for的四种使用方式没有优劣,主要看使用场景和需求选择。