遍历数组和对象

和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app-1">
<div v-for="(site, index) in sites">
{{ index + 1 }}.{{ site.name }}
<li v-for="(value, key, index) in site">
{{ key }}: {{ value }}
</li>
</div>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el: '#app-1',
data: {
sites: [
{ url: 'http://www.tansea.cn', name: '双子宫殿', prValue: 0 },
{ url: 'https://www.google.com', name: '谷歌', prValue: 10 },
{ url: 'https://www.baidu.com', name: '百度', prValue: 9 }
]
}
})
</script>
</body>
</html>

外循环的sites是一个数组,遍历数组的语法格式:(item, index) in items,item指迭代元素,index指索引,items指原始数据数组

内循环的site是一个对象,遍历对象的语法格式:(value, key, index) in object,value指属性值,key指属性名称,index指索引,object指对象

当然参数也是可以缺省的,在只有一个参数的时候可以不用刮号

<div id="app-1">
<div v-for="site in sites">
{{ site.name }}
<li v-for="(value, key) in site">
{{ key }}: {{ value }}
</li>
</div>
</div>

在整数范围内迭代

<div id="app-2">
<span v-for="n in 10">{{ n }}</span>
<span v-for="n in [1,3,5,7,9]">{{ n }}</span>
</div>
<script type="text/javascript">
var vm2 = new Vue({
el: '#app-2'
})
</script>

n in 10是1到10整数范围内迭代

n in [1,3,5,7,9]是数组内元素迭代,这里的数组包括5个元素

Vue.js学习笔记 第四篇 列表渲染的更多相关文章

  1. Vue.js学习笔记 第三篇 条件渲染

    条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  2. Vue.js学习笔记 第八篇 组件

    全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  3. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  4. Vue.js学习笔记 第六篇 内置属性

    computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  5. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  6. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  7. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  8. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

随机推荐

  1. PC如何访问手机网址

    http://blog.csdn.net/matthew_fan/article/details/7787504

  2. centos虚拟机复制后网络重启出错解决

    参考:http://blog.csdn.net/xluren/article/details/38986667 执行service network restart后出现如下错误 FAILED: Bri ...

  3. VIM快速使用

    1.VIM键盘图[转] 2.vi复制多行文本的方法 2.1 方法1:光标放到第6行, 输入:2yy 光标放到第9行, 输入:p 此方法适合复制少量行文本的情况,复制第6行(包括)下面的2行数据,放到第 ...

  4. SpringAOP和AspectJ

    SpringAOP和AspectJ的关系 问题:之前对 SpringAOP和AspectJ的关系感到疑惑,因为曾经在书上看过SpringAOP集成了AspectJ,那么SpringAOP是直接使用了A ...

  5. LINQ TO SQL 实现无限递归查询

    from:http://blog.csdn.net/q107770540/article/list 见论坛内有网友提问类似的问题已经不止一次了, 现总结一下,希望能给以后再碰到此类问题的朋友一些帮助  ...

  6. Android:SlidingMenu+ListView+ViewPager 的滑动冲突

    在项目中遇到了SlidingMenu.ListView.ViewPager 一起使用.而且ViewPager 是放在ListView的header中,这样的情况下会无法滑动ViewPager,通过在网 ...

  7. 命令提示符(cmd)中的tracert命令详解

    tracert也被称为Windows路由跟踪实用程序,在命令提示符(cmd)中使用tracert命令可以用于确定IP数据包访问目标时所选择的路径.本文主要探讨了tracert命令的各个功能. 工具/原 ...

  8. bin/mysqld: error while loading shared libraries: libnuma.so.1: 安装mysql

    如果安装mysql出现了以上的报错信息.这是却少numactl这个时候如果是Centos就yum -y install numactl就可以解决这个问题了. ubuntu的就sudo apt-get ...

  9. fork小续

    pid_t pid = fork(); 1.根据fork的返回值区分父子进程: fork 函数返回两次, >0 表示父进程,返回值为子进程ID; =0 表示子进程; <0 出错. 可用代码 ...

  10. JavaScript Observer Pattern

    var Users = { list: [], listeners: {}, add: function(name) { this.list.push({name: name}); this.disp ...