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


Posted in Javascript onApril 18, 2018

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,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
兼容FF和IE的动态table示例自写
Oct 21 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
基于Vue的延迟加载插件vue-view-lazy
May 21 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
微信小程序实现时间进度条功能
Nov 17 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 #Javascript
JS实现二维数组横纵列转置的方法
Apr 17 #Javascript
redux中间件之redux-thunk的具体使用
Apr 17 #Javascript
Vue进度条progressbar组件功能
Apr 17 #Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 #Javascript
Angular数据绑定机制原理
Apr 17 #Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 #Javascript
You might like
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
jquery的$(document).ready()和onload的加载顺序
2010/05/26 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
详解如何在Angular中快速定位DOM元素
2017/05/17 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
js实现每日签到功能
2018/11/29 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
探究数组排序提升Python程序的循环的运行效率的原因
2015/04/01 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
python实现ftp文件传输系统(案例分析)
2020/03/20 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
员工试用期考核自我鉴定
2014/04/13 职场文书
考试诚信承诺书
2014/05/23 职场文书
超市创业计划书
2014/09/15 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
华清池导游词
2015/02/02 职场文书
医院见习总结
2015/06/24 职场文书