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封装的对话框简单实现
Jul 21 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
React中this丢失的四种解决方法
Mar 12 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
原生JS实现天气预报
Jun 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 &amp;&amp; 逻辑与运算符使用说明
2010/03/04 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
laravel按天、按小时,查询数据的实例
2019/10/09 PHP
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
JavaScript 继承详解(六)
2016/10/11 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
JS自定义对象创建与简单使用方法示例
2020/01/15 Javascript
python定时器使用示例分享
2014/02/16 Python
python进行两个表格对比的方法
2018/06/27 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
指针和引用有什么区别
2013/01/13 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
部队学习十八大感言
2014/01/11 职场文书
客户接待方案
2014/02/26 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
详解Python中下划线的5种含义
2021/07/15 Python
baselines示例程序train_cartpole.py的ImportError
2022/05/20 Python