v-for 使用方法

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>