Vue.js学习笔记 第四篇 列表渲染
遍历数组和对象
和条件选择一样,循环也和其他语言类似,也尝试着用一个例子解决问题
<!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学习笔记 第四篇 列表渲染的更多相关文章
- Vue.js学习笔记 第三篇 条件渲染
条件选择 条件选择的用法和其他语言类似,一个例子就能解决所有问题 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue.js学习笔记 第八篇 组件
全局注册组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue.js学习笔记 第六篇 内置属性
computed属性 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- Vue.js学习笔记 第五篇 事件处理
监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
随机推荐
- PC如何访问手机网址
http://blog.csdn.net/matthew_fan/article/details/7787504
- centos虚拟机复制后网络重启出错解决
参考:http://blog.csdn.net/xluren/article/details/38986667 执行service network restart后出现如下错误 FAILED: Bri ...
- VIM快速使用
1.VIM键盘图[转] 2.vi复制多行文本的方法 2.1 方法1:光标放到第6行, 输入:2yy 光标放到第9行, 输入:p 此方法适合复制少量行文本的情况,复制第6行(包括)下面的2行数据,放到第 ...
- SpringAOP和AspectJ
SpringAOP和AspectJ的关系 问题:之前对 SpringAOP和AspectJ的关系感到疑惑,因为曾经在书上看过SpringAOP集成了AspectJ,那么SpringAOP是直接使用了A ...
- LINQ TO SQL 实现无限递归查询
from:http://blog.csdn.net/q107770540/article/list 见论坛内有网友提问类似的问题已经不止一次了, 现总结一下,希望能给以后再碰到此类问题的朋友一些帮助 ...
- Android:SlidingMenu+ListView+ViewPager 的滑动冲突
在项目中遇到了SlidingMenu.ListView.ViewPager 一起使用.而且ViewPager 是放在ListView的header中,这样的情况下会无法滑动ViewPager,通过在网 ...
- 命令提示符(cmd)中的tracert命令详解
tracert也被称为Windows路由跟踪实用程序,在命令提示符(cmd)中使用tracert命令可以用于确定IP数据包访问目标时所选择的路径.本文主要探讨了tracert命令的各个功能. 工具/原 ...
- bin/mysqld: error while loading shared libraries: libnuma.so.1: 安装mysql
如果安装mysql出现了以上的报错信息.这是却少numactl这个时候如果是Centos就yum -y install numactl就可以解决这个问题了. ubuntu的就sudo apt-get ...
- fork小续
pid_t pid = fork(); 1.根据fork的返回值区分父子进程: fork 函数返回两次, >0 表示父进程,返回值为子进程ID; =0 表示子进程; <0 出错. 可用代码 ...
- JavaScript Observer Pattern
var Users = { list: [], listeners: {}, add: function(name) { this.list.push({name: name}); this.disp ...