Vue列表渲染
gitHub地址:https://github.com/manlili/vue_learn里面lesson09
一 for循环数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="test">
<li v-for="item in name"> <!--获取位置第一种写法:$index是vue自带的位置索引-->
{{$index}}--{{item.message}} <!--输出0--Foo 1--Bar-->
</li>
<li v-for="(index,item) in name"> <!--获取位置第二种写法:自定义一个index变量直接跟着item-->
{{index}}**{{item.message}} <!--输出0**Foo 1**Bar-->
</li>
</ul>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
name: [ //注意name是数组
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
</body>
</html>
二 for循环对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="test">
<li v-for="value in name">
{{$key}}--{{value}} <!--输出是 FirstName--John LastName--Doe Age--30-->
</li>
</ul>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
name:{ //注意name是对象
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
})
</script>
</body>
</html>
三 track-by定义不需重新渲染的DOM片段
功能:有时候数组数据变化,页面所有DOM都需要重新渲染,这样会增加渲染时间,但是track-by可以定义哪些DOM被复用,使Vue.js 因而能尽可能地复用已有实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue列表</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul class="test">
<li v-for="item in name" track-by="id"> <!--然后在替换数组 name 时,如果 Vue.js 遇到一个包含id:'01' 的新对象,vue可以复用这个已有对象的作用域与 DOM 元素。-->
{{$index}}--{{item.message}} <!--输出0--Foo 1--Bar-->
</li>
</ul>
<script type="text/javascript">
var myVue = new Vue({
el: ".test",
data: {
name: [ //注意item是数组
{ message: 'Foo',id:01 },
{ message: 'Bar',id:02 }
]
}
})
</script>
</body>
</html>
Vue列表渲染的更多相关文章
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- Vue 列表渲染及条件渲染实战
条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue 帮我们提供了一个v-if的指 ...
- 14 Vue列表渲染
列表渲染 用 v-for 把一个数组对应为一组元素(for循环) 我们可以用 v-for 指令基于一个数组来渲染一个列表. v-for 指令需要使用 item in items 形式的特殊语法, 其中 ...
- Vue 列表渲染中的key
首先看一下官网的论述: 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略.如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单 ...
- Vue.js高效前端开发 • 【Vue列表渲染】
全部章节 >>>> 文章目录 一.v-for指令 1.v-for指令使用 2.实践练习(待更新) 二.计算属性 1.计算属性创建和使用 2.实践练习(待更新) 三.侦听属性 1 ...
- vue 列表渲染 v-for
1.数组列表 v-for 块中,我们拥有对父作用域属性的完全访问权限.v-for 还支持一个可选的第二个参数为当前项的索引 1.1 普通渲染 v-for="item ...
- vue 列表渲染 v-for循环
v-for循环指令类似与html中C标签的循环,同样可以遍历数组,集合. 1.这里演示一下遍历数组的基本用法,代码如下 <!DOCTYPE html> <html> <h ...
- Vue:列表渲染 v-for on a <template>
类似于 v-if,你也可以利用带有 v-for 的 <template> 渲染多个元素.比如: <html> <head> <title>Vue v-f ...
随机推荐
- 移动API-restful的设计原则和参考
移动应用API设计10大技巧 http://jingyan.baidu.com/article/455a9950fd27ffa166277825.html RESTful API 设计指南 http: ...
- easyui filebox 浏览图片
<img id="image1"/> <input id="f1" class="easyui-filebox" name ...
- scanf中的[]
今天被问到一个问题,如何用scanf将 hello-my-world中的三个单词, hello my world 分别放到三个char数组中去 于是用到了scanf中的[] [ ] 扫描字符集合,比如 ...
- 《Linux程序设计》--读书笔记---第十三章进程间通信:管道
管道:进程可以通过它交换更有用的数据. 我们通常是把一个进程的输出通过管道连接到另一个进程的输入: 对shell命令来说,命令的连接是通过管道字符来完成的: cmd1 | cmd2 sh ...
- 玩转PowerShell第三节——【SCOM Maintenance Mode】-技术&分享
概述 Microsoft System Center Operations Manager 2007 sp1(SCOM)是微软推出的专业系统监控软件,可以监控部署在网络中的服务器.应用系统和客户端,提 ...
- gulp-imagemin图片压缩----gulp系列(三)
本节实现图片压缩,在实现压缩前,先配置images任务,设置源目录和输出目录. 在系列(二)代码的基础上,再进行扩展. 1.找到gulp->config.js,对images进行源目录(src- ...
- Android学习笔记之dispatchTouchEvent和OnInterceptTouchEvent和OnTouchEvent三个方法之间的联系...
PS:好久没有写博客了,项目正式开始启动了,但是怎么也打不起精神来...可能还是不适应放假留校...这下一年只能回家一次了...伤感...写篇博客舒坦下... 学习内容: Android中disp ...
- 一种感觉不太好的设置radioButton的方法
从后台传到前台,让前台的Radiobutton被选中. jquery代码: if(b_type == '') { return false; } else if($('input[name = &qu ...
- sql server 脚本创建数据库邮件
sql server 脚本创建数据库邮件代码: --脚本创建数据库邮件 --1.开启数据库邮件 RECONFIGURE WITH OVERRIDE GO RECONFIGURE WITH OVERRI ...
- github生成燃尽图
一. 前期准备工作. 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8添加标签 二. 修改进度 2.1进入milestone,编辑 可以看到上面有bug标签,进入并解决 ...