90 lines
1.4 KiB
Markdown
90 lines
1.4 KiB
Markdown
# 循环渲染
|
||
|
||
### 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']
|
||
},
|
||
})
|
||
```
|
||
|
||
效果如下：
|
||
|
||
|
||
|
||
|
||
|
||
### 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'
|
||
}
|
||
},
|
||
})
|
||
```
|
||
|
||
|
||
|
||
效果如下：
|
||
|
||
|
||
|
||
|
||
|
||
### v-for 遍历范围值
|
||
|
||
```
|
||
<div>
|
||
<span v-for="n in 10">{{ n }} </span>
|
||
</div>
|
||
```
|
||
|
||
|
||
|
||
|
||
|