用v-for指令根据一组数组的选项列表进行渲染。v-for指令需要以item in items 形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。
v-for(遍历数组)基本用法
<ul class="box">
<li v-for="obj in persons">
{{obj.name}}-{{obj.age}}
</li>
</ul> <script>
new Vue({
el: '.box',
data: {
persons: [{
name: 'tom',
age: 18
}, {
name: 'jack',
age: 20
}]
},
})
</script>v-for可选的第二个参数
v-for支持一个可选的第二个参数为当前的索引。
<ul class="box">
<li v-for="(obj,index) in persons">
{{index}}-{{obj.name}}-{{obj.age}}
</li>
</ul> <script>
new Vue({
el: '.box',
data: {
persons: [{
name: 'tom',
age: 18
}, {
name: 'jack',
age: 20
}, {
name: 'make',
age: 19
}]
},
})
</script>页面输出效果如下图：
v-for不仅可以遍历数组，还可以遍历对象，遍历字符串，遍历指定次数。
v-for遍历对象
<ul class="box">
<li v-for="(value,k) of car">
{{k}}--{{value}}
</li>
</ul> <script>
new Vue({
el: '.box',
data: {
car: {
model: 'BMW X4 M',
price: '90万',
color: '绿色'
}
},
})
</script>页面输出效果如下图：
v-for遍历字符串
<ul class="box">
<li v-for="(char,index) of str" :key="index">
{{index}}--{{char}}
</li>
</ul> <script>
new Vue({
el: '.box',
data: {
str: 'hello'
},
})
</script>页面输出效果如下图：
v-for遍历次数
<ul class="box">
<li v-for="(number,index) of 8">
{{index}}-{{number}}
</li>
</ul>页面输出效果如下图：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/6249.html
