v-for的四种使用方式
1、数组
在Vue中使用v-for遍历数组时v-for最常见的一种使用方式。
(1)先在data中定义数组

arr: [1, 2, 3, 4, 5],

arr: [1, 2, 3, 4, 5],

(2)在标签中遍历

<p v-for="(item,index) in arr">数值:{{item}},索引:{{index}}</p>

对象数组

对象数组,其实说到底也是数组,使用方式上和数组一模一样。
(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>
Logo

前往低代码交流专区

更多推荐