webveuje/vue/循环渲染.md

# 循环渲染

### v-for 遍历数组

语法：

​	v-for="(item,index) in arr" :key="index"

> ​	arr是被渲染的数组，item是被迭代的数组元素的别名 ， index 指代数组的索引值 

示例：

```
 <div v-for="(item,index) in arr" :key="index">
      第{{index}} 个元素  值为{{item}}
 </div>
 
 变体：
  <div v-for="(i,j) in pics" :key="j">
      第{{j}} 个元素  值为{{i}}
 </div>
```

```
var app = new Vue({
            el: '#app',
            data: {
               arr:['a','b','c','d','e']
            },
        })
```

效果如下：

![image-20201222101315624](循环渲染.assets/image-20201222101315624.png)



### v-for 遍历对象的属性



语法： 

​	v-for="(item,index) in obj" :key="index"

> obj 是要遍历的对象   item 指代的是对象的值    index 指代的是对象的键

示例：

```
 <div v-for="(item,index) in obj" :key="index">
      键为index  值为{{item}}
 </div>
```

```
var app = new Vue({
    el: '#app',
    data: {
        obj: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
        }
    },
})
```



效果如下：

![image-20201222110247849](循环渲染.assets/image-20201222110247849.png)



### v-for 遍历范围值

```
<div>
  <span v-for="n in 10">{{ n }} </span>
</div>
```

![image-20201222111007833](循环渲染.assets/image-20201222111007833.png)