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 ...
随机推荐
- C++ Low level performance optimize 2
C++ Low level performance optimize 2 上一篇 文章讨论了一些底层代码的优化技巧,本文继续讨论一些相关的内容. 首先,上一篇文章讨论cache missing的重要性 ...
- 译:C#面向对象的基本概念 (Basic C# OOP Concept) 第三部分(多态,抽象类,虚方法,密封类,静态类,接口)
9.多态 Ploy的意思就是多于一种形式.在文章开始,方法那一章节就已经接触到了多态.多个方法名称相同,而参数不同,这就是多态的一种. 方法重载和方法覆盖就是用在了多态.多态有2中类型,一种是编译时多 ...
- HMM MEMM & label bias
(http://blog.csdn.net/xum2008/article/details/38147425) 隐马尔科夫模型(HMM): 图1. 隐马尔科夫模型 隐马尔科夫模型的缺点: 1.HMM只 ...
- Some User Can Not Execute "Ship Confirm"(Doc ID 473312.1)
APPLIES TO: Oracle Shipping Execution - Version 11.5.10.2 and later Information in this document app ...
- LINQ to SQL语句非常详细(原文来自于网络)
LINQ to SQL语句(1)之Where Where操作 适用场景:实现过滤,查询等功能. 说明:与SQL命令中的Where作用相似,都是起到范围限定也就是过滤作用的,而判断条件就是它后面所接的子 ...
- 解决Eclipse报errors running builder ‘javascript validator’ on project
导入jquery的js到项目中,Eclipse每次检测到功能代码变化(保存动作触发)就报错: errors running builder ‘javascript validator’ on proj ...
- 后端码农谈前端(HTML篇)第三课:常见属性
一.HTML全局属性 1.核心属性 属性 描述 id 设置元素的唯一 id. class 设置元素的一个或多个类名(引用样式表中的类). style 设置元素的行内样式(CSS内联样式). title ...
- 编写高质量JS代码的68个有效方法(三)
[20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...
- ASP.NET MVC分页实现之改进版-增加同一个视图可设置多个分页
我之前就已经实现了ASP.NET MVC分页(查看该博文),但它有局限性,必须确保在同一个视图中只能有一处分页,若需要在同一个视图中设置多个分页,却无能为力,为此,我重新对原先的代码进行了优化,增加了 ...
- [ASP.NET] 下一代ASP.NET开发规范:OWIN
今天投简历 准备面试了... 本节目录: OWIN简介 OWIN规范 Katana Hello World(3种Host) 自定义Middleware OWIN简介 OWIN(Open Web Int ...