浅析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 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
基于JS实现bookstore静态页面的实例代码
Feb 22 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
React实现评论的添加和删除
Oct 20 Javascript
uniapp开发小程序的经验总结
Apr 08 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开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP读取文件内容后清空文件示例代码
2014/03/18 PHP
在win7中搭建Linux+PHP 开发环境
2014/10/08 PHP
PHP判断是否为空的几个函数对比
2015/04/21 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
2016/02/15 PHP
js使用onmousemove和onmouseout获取鼠标坐标的方法
2015/03/31 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
2017/08/08 Javascript
react-router browserHistory刷新页面404问题解决方法
2017/12/29 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python开头的coding设置方法
2019/08/08 Python
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
有个性的自我评价范文
2013/11/15 职场文书
公务员综合考察材料
2014/02/01 职场文书
酒店管理求职信范文
2014/04/06 职场文书
企业宣传口号
2014/06/12 职场文书
督导岗位职责
2015/02/04 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书
Redis6.0搭建集群Redis-cluster的方法
2021/05/08 Redis