v-for遍历数组和对象
vue初学者在使用v-for属性时可能不能区分数组遍历和对象的遍历,这里做一个记录:v-for指令是用来遍历 数组、对象以及整数的,下面依次讲解遍历数组v-for最常用的可能就是用来遍历数组,接受两个参数(item, index),item为遍历出的每组数据,index为每组数据的索引,可做唯一标识<div id="demo"<el-span v-for="(item, index)
·
vue初学者在使用v-for属性时可能不能区分数组遍历和对象的遍历,这里做一个记录:
v-for指令是用来遍历 数组、对象以及整数的,下面依次讲解
- 遍历数组
v-for最常用的可能就是用来遍历数组,接受两个参数(item, index),item为遍历出的每组数据,index为每组数据的索引,可做唯一标识
<div id="demo"
<el-span v-for="(item, index) in array" :key="index">
{{index}}: {{item}}
</el-span>
</div>
new Vue({
el: '#demo',
data: {
array: [
'red',
'green',
'pink'
]
}
})
2.遍历对象
v-for遍历对象可接受三个参数(value, key, index),value为每个对象的value值,key为key值,index为索引
<div id="demo"
<el-span v-for="(value, key, index) in objectDemo" :key="index">
{{index}}: {{item}}: {{value}}
</el-span>
</div>
new Vue({
el: '#demo',
data: {
objectDemo: {
color: '#ffffff',
size: '20px',
background: '#000000'
}
}
})
3.遍历整数
如下,遍历整数会一次打印出1,2,3,4,5
<div id="demo"
<el-span v-for="num in nums" :key="num">
{{num}}
</el-span>
</div>
new Vue({
el: '#demo',
data: {
nums: 5
}
})
小伙伴如果有疑问可以第一时间评论或留言,看到后也会及时回复的,有帮助的麻烦动动手指点个赞哟!
更多推荐
已为社区贡献5条内容
所有评论(0)