浅析vue中常见循环遍历指令的使用 v-for

发布时间:2020-10-14 18:13:27 作者:RiceYao
来源:脚本之家 阅读:375

vue中循环遍历使用的指令是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

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

 3.v-for遍历整数

(1)n in 整数 遍历1~整数,整数从1开始

(2)(n,index) in 整数 遍历1~整数,整数从1开始,索引从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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!

推荐阅读:
  1. vue中怎么利用v-for指令直接循环数字
  2. Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue 指令 v-for

上一篇:php重定向后跳转不了怎么办

下一篇:java对XML文件解析、增加和删除节点的案例

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》