Vue.js常用指令之循环使用v-for指令教程


Posted in Javascript onJune 27, 2017

前言

Vue.js中,v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表:

<div id="wantuizhijia">
 <ol>
  <li v-for="site in sites">
   {{ site.name }}
  </li>
 </ol>
</div>

<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   sites: [
    { name: '网推之家' },
    { name: '谷歌' },
    { name: '淘宝' }
   ]
  }
 })
</script>

输出:

Vue.js常用指令之循环使用v-for指令教程

模板中使用 v-for:

<div id="wantuizhijia">
 <ul>
  <template v-for="place in places">
   <li>{{ place.name }}</li>
   <li>--------------</li>
  </template>
 </ul>
</div>

<script>
 new Vue({
  el: '#wantuizhijia',
  data: {
   places: [
    { name: '厦门' },
    { name: '漳州' },
    { name: '福州' }
   ]
  }
 })
</script>

效果:

Vue.js常用指令之循环使用v-for指令教程

v-for 可以通过一个对象的属性来迭代数据:

<div id="wangtuizhijia">
 <ul>
  <li v-for="value in object">
   {{ value }}
  </li>
 </ul>
</div>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '三水点靠木',
    url: 'https://3water.com',
    slogan: '美好生活,等待你的开创!'
   }
  }
 })
</script>

效果:

三水点靠木

https://3water.com

美好生活,等待你的开创!

v-for 通过一个对象的属性来迭代数据,可以提供第二个的参数为键名:

<div id="wangtuizhijia">
 <ul>
  <li v-for="(value, key) in object">
   {{ key }} : {{ value }}
  </li>

 </ul>
</div>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '三水点靠木',
    url: 'https://3water.com',
    slogan: '美好生活,等待你的开创!'
   }
  }
 })
</script>

效果:

name : 三水点靠木

url : https://3water.com

slogan : 美好生活,等待你的开创!

v-for 通过一个对象的属性来迭代数据,以第三个参数为索引:

<div id="wangtuizhijia">
 <ul>
  <li v-for="(value, key, index) in object">
   {{ index }} {{ key }}:{{ value }}
  </li>

 </ul>
</div>

<script>
 new Vue({
  el: '#wangtuizhijia',
  data: {
   object: {
    name: '三水点靠木',
    url: 'https://3water.com',
    slogan: '美好生活,等待你的开创!'
   }
  }
 })
</script>

效果:

0 name:三水点靠木

1 url:https://3water.com

2 slogan:美好生活,等待你的开创!

v-for 也可以循环整数

<div id=”wangtuizhijia”>
<ul>
<li v-for=”n in 10″>
{{ n }}
</li>
</ul>
</div>
<script>
new Vue({
el: ‘#wangtuizhijia'
})
</script>
</body>

效果:

1
2
3
4
5
6
7
8
9
10

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
Javascript中的关键字和保留字整理
Oct 16 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
ECMAScript中函数function类型
Jun 03 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
node实现爬虫的几种简易方式
Aug 22 Javascript
js获取地址栏参数的两种方法
Jun 27 #Javascript
React组件之间的通信的实例代码
Jun 27 #Javascript
JS实现图片预览的两种方式
Jun 27 #Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 #Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 #Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 #Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 #Javascript
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
使用adodb lite解决问题
2006/12/31 PHP
php字符串截取的简单方法
2013/07/04 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
50个比较实用jQuery代码段
2011/09/18 Javascript
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
iframe里的页面禁止右键事件的方法
2014/06/10 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
js判断密码强度的方法
2020/03/18 Javascript
利用Python的装饰器解决Bottle框架中用户验证问题
2015/04/24 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python自定义线程池实现方法分析
2018/02/07 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
大学生标准推荐信范文
2013/11/25 职场文书
中专生自我鉴定范文
2013/12/19 职场文书
九年级家长会邀请函
2014/01/15 职场文书
技能培训通讯稿
2015/07/18 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
导游词之江南周庄
2019/12/06 职场文书
Python实现简繁体转换
2021/06/07 Python