Vue.js v-for指令详解:数组、对象与整数遍历
本文详细介绍Vue.js中v-for指令的三种主要应用场景。涵盖如何遍历数组获取元素与索引,如何遍历JSON对象提取值、键及索引,以及如何使用v-for进行整数范围循环。通过具体代码示例展示各场景下的数据绑定方式与输出结果,帮助开发者掌握Vue列表渲染的核心语法。
Vue v-for指令概述
在Vue.js框架中,实现列表循环遍历的核心指令为v-for。
v-for遍历数组详解
1. v-for遍历数组
(1) value in arr:用于遍历数组中的各个元素。
(2) (value, index) in arr:用于同时遍历数组元素及其对应的下标索引。
运行代码:
<body>
<div class="box">
<ul>
<li v-for="value in arr">{{value}}</li><br>
<li v-for="(value,index) in arr">{{value}}--{{index}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
arr:["哈哈","嘻嘻","哼哼"]
}
});
</script>
</body>
输出结果:

v-for遍历JSON对象方法
2. v-for遍历JSON对象
(1) value in json:用于遍历JSON对象中的值。
(2) (value, key) in json:用于遍历JSON对象中的值及其对应的键。
(3) (value, key, index) in json:用于同时遍历JSON对象中的值、键以及索引。
运行代码:
<body>
<div class="box">
<ul>
<li v-for="value in json">{{value}}</li><br>
<li v-for="(value,key) in json">{{value}}--{{key}}</li><br>
<li v-for="(value,key,index) in json">{{value}}--{{key}}--{{index}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
json:{
baidu:"百度",
souhu:"搜狐",
sougou:"搜狗"
}
}
});
</script>
</body>
输出结果:

v-for整数循环遍历
3. v-for遍历整数
(1) n in 整数:用于遍历从1到指定整数的范围,起始值为1。
(2) (n, index) in 整数:用于遍历从1到指定整数的范围,其中n从1开始,index索引从0开始。
运行代码:
<body>
<div class="box">
<ul>
<li v-for="n in 3">{{n}}</li><br>
<li v-for="(n,index) in 3">{{n}}--{{index}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:".box",
data:{
}
});
</script>
</body>
输出结果:

此外,v-for指令同样可以在template标签中使用,此处不再赘述。
总结
以上内容介绍了Vue中v-for指令在数组、对象及整数遍历中的常见用法。希望本文能为您提供帮助,如有疑问欢迎留言,小编会及时回复。感谢支持!
怎么在 Vue 3 和 React 项目中封装使用 Quill.js 编辑器
2026-11-02 10:28:27
Vue 和 React 项目中集成 qrcode.js 的注意事项
2026-11-02 10:28:19
Vue3实现多内容滑动轮播组件完整代码示例
2026-10-31 20:20:59
Element Plus 中 mt-x 类的使用与卡片间距调整
2026-10-31 16:50:52
前端qrcode生成二维码安装及使用示例详解
2026-10-31 15:22:14
