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 ...
随机推荐
- iOS 。开发之指纹识别功能
// 头文件导入 #import <LocalAuthentication/LocalAuthentication.h> //在iPhone5s的时候,苹果推出了指纹解锁.但是在ios8. ...
- 使用spring+quartz配置多个定时任务
Spring被用在了越来越多的项目中, quartz也被公认为是比较好用的定时器设置工具, 在这里通过一个demo说明如何使用spring和quartz配置多个定时任务. 环境: eclipse + ...
- python学习【第五篇】python函数 (二)
一.装饰器 装饰器:本质就是函数,功能是为其它函数添加附加功能 装饰器的原则: 不修改被修饰函数的源代码 不修改被修饰函数的调用方式 装饰器的知识储备: 装饰器 = 高阶函数 + 函数嵌套 + 闭包 ...
- NOIP2011提高组（选择客栈）
题目链接:http://codevs.cn/problem/1135/ 题目大意:中文题...就不解释了 题目思路:看了其他巨巨的blog写的,dp思路 #include <iostream&g ...
- CODEVS 必做题:3149、2821、1531、3369、1230
3149 爱改名的小融 2 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description Wikioi上有个人叫小融,他喜 ...
- 如何运行Python程序
注:以下均基于windows下操作,并且安装的是最新的python3.3版本. 安装完python之后,我们可以做两件事情, 1.将安装目录中的Doc目录下的python331.chm使用手册复制到桌 ...
- MongoDB实践-自定义ASP.NET Session Store
Session由来 由于HTTP协议是无状态的,客户端与服务器端进行“请求-响应”操作后,建立的连接就释放了,服务器端根本不知道刚才是哪个客户端访问的.但是有些场景是需要知道客户端的状态的,最典型的就 ...
- hbase运行时ERROR:org.apache.hadoop.hbase.PleaseHoldException:Master is initializing的解决方法
最终解决了,其实我心中有一句MMP. 版本: hadoop 2.6.4 + hbase0.98 第一个问题,端口问题8020 hadoop默认的namenode 资源子接口是8020 端口,然后我这接 ...
- JS中的this变量的使用介绍
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,在本文将为大家详细介绍下JavaScript中this的使用,感兴趣的朋友可以参考下. JavaScript中t ...
- Maven学习笔记【1】 -- Maven简介
本文主要讲Maven的基础知识. 一 什么是Maven? Maven是一个项目管理工具.Maven提供了一个项目对象模型(POM)文件的新概念来管理项目的构建,相关性和文档.最强大的功能就是能够自动下 ...