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 ...
随机推荐
- Redis 3 在CentOS 6.5上安装笔记,含启动脚本
Redis的强大就不多说了,直接上菜. 第1步:下载.编译.安装 cd /opt wget http://download.redis.io/releases/redis-3.0.5.tar.gz . ...
- 初窥ElasticSearch
初窥ElasticSearch 官网上面的,不知道讲的是什么.. youtube上面有一个start with,内容是在windows以下跑这个elastic search,然后用一个fidler工具 ...
- linq to sql 动态构建查询表达式树
通过Expression类进行动态构造lamda表达式. 实现了以下几种类型,好了代码说话: public Expression<Func<T, bool>> GetAndLa ...
- dos下查找进程,如果找到echo find并结束该进程
@echo offset var=chromedriver.exetasklist | findstr "%var%" && echo findtaskkill / ...
- c++包含头文件好还是重新定义好
A.h struct A { int a; int b; }; B.cpp 在B.cpp里面用到这个结构体 有两种方法 .自己定义一个一模一样的结构体 struct A { }; .包含A.h头文件 ...
- Bootstrap(Web前端CSS框架)
官方定义: Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile fi ...
- 【BZOJ3122】[Sdoi2013]随机数生成器 BSGS+exgcd+特判
[BZOJ3122][Sdoi2013]随机数生成器 Description Input 输入含有多组数据,第一行一个正整数T,表示这个测试点内的数据组数. 接下来T行,每行有五个整数p,a,b, ...
- jQuery之获取checkbox选中的值
<mce:script src="jquery.js" mce_src="jquery.js"></mce:script><!-- ...
- 巨蟒django之CRM5 学习记录&&课程记录&&班级管理&&私户的数量上限
1.公户变私户(事务+行级锁) 2.私户的数量上限 3.班级的管理 4.课程记录管理 5.学习记录的初始化 6.展示和编辑学习记录
- 不恰当使用线程池处理 MQ 消息引起的故障
现状 业务部门反应网站访问特别慢,负责运维监控的同事说MQ消息队列积压了,中间件的说应用服务器内存占用很高,GC 一直回收不了内存,GC 线程占了近 100% 的 CPU,其他的基本上都在等待,数据库 ...