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 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
Dec 08 Javascript
在React框架中实现一些AngularJS中ng指令的例子
Mar 06 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
15款最好的Bootstrap在线编辑器
Aug 03 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
jQuery窗口拖动功能的实现代码
Feb 04 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
php代码运行时间查看类代码分享
2011/08/06 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
JS小功能(操作Table--动态添加删除表格及数据)实现代码
2013/11/28 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
jupyter lab文件导出/下载方式
2020/04/22 Python
python进度条显示-tqmd模块的实现示例
2020/08/23 Python
Python字符串查找基本操作代码案例
2020/10/27 Python
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
介绍一下JMS编程步骤
2015/09/22 面试题
预备党员政审材料
2014/02/04 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
新员工入职感想
2015/08/07 职场文书