Vue.js v-for指令详解:数组、对象与整数遍历

作者:模板散步时间:2026-10-22 13:45:59浏览:189

本文详细介绍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>

输出结果:

Vue v-for指令概述

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>

输出结果:

Vue v-for指令概述

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>

输出结果:

Vue v-for指令概述

此外,v-for指令同样可以在template标签中使用,此处不再赘述。

总结

以上内容介绍了Vue中v-for指令在数组、对象及整数遍历中的常见用法。希望本文能为您提供帮助,如有疑问欢迎留言,小编会及时回复。感谢支持!

作者最新文章