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 相关文章推荐
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
jQuery中Ajax的load方法详解
Jan 14 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
详解vue组件通信的三种方式
Jun 30 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 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使用codebase生成随机数
2014/03/25 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
基于JQuery的Pager分页器实现代码
2010/07/17 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
JS.getTextContent(element,preformatted)使用介绍
2013/09/21 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
javascript实现浏览器窗口传递参数的方法
2014/09/03 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JS作用域深度解析
2016/12/29 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
Vue 监听列表item渲染事件方法
2018/09/06 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
创意婚礼策划方案
2014/05/18 职场文书
家庭贫困证明
2014/09/23 职场文书
天坛导游词
2015/02/02 职场文书
党员个人总结自评
2015/02/14 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
听课评课活动心得体会
2016/01/15 职场文书