Vue.js笔记-条件渲染 列表渲染
条件渲染v-ifdiv id="demo">div v-if="abc">{{abc.a}}div> //该值为true时显示该标签，为false则不显示div>var vm = new Vue({el:'#demo',data:{abc:{a:"1"} }})script>if...else结构h1
·
条件渲染
v-if
<div id="demo"><div v-if="abc">{{abc.a}}</div> //该值为true时显示该标签，为false则不显示</div><script>var vm = new Vue({el:'#demo',data:{abc:{- a:"1"
}}})</script>
if...else结构
<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
if...else if...else结构，if-else用嵌入的方式放进去
<div v-if=""></div><template v-else><div v-if=""></div><div v-else></div></template>
v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别。
template v-if
如果想切换多个元素，可以把一个<template>元素当作包装元素，并在上面使用v-if，最终的渲染结果不会包含它。
<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p></template>
v-show
不同的是有 v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display。注意 v-show 不支持 <template> 语法。
<h1 v-show="ok">Hello!</h1>
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。
一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
列表渲染
v-for
基于一个数组渲染一个列表。
语法：item in items（数组元素的别名 in 数据数组）
<ul id="example-1"><li v-for="item in items">{{ item.message }}</li></ul>var example1 = new Vue({el: '#example-1',data: {items: [{ message: 'Foo' },{ message: 'Bar' }]}})
在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，是当前数组元素的索引。另外，可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：
<div v-for="(index, item) in items">{{ index }} {{ item.message }}</div>
从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：
<div v-for="item of items"></div>
template v-for
渲染一个包含多个元素的块，需要将多个标签都用v-for遍历，那么就需要用template标签。同样，template在实际渲染的时候不会出现，只是起到一个包裹作用。
<div id="app"><ul><template v-for="i in items"><li>Index is {{$index}}</li><li>Content is {{i}}</li></template></ul></div><script>var vm = new Vue({el: '#app',data: {items: {a: "1",b: "2",c: "3"}}})</script>
渲染为：
<ul><li>Index is 0</li><li>Content is 1</li><li>Index is 1</li><li>Content is 2</li><li>Index is 2</li><li>Content is 3</li></ul>
数组变动检测
变异方法（修改了原始数组）：
vue.js包装了被观察数组的变异方法，故它们能出发视图更新，即当利用这些方法变更数组时，被渲染的内容会实时更新，被包装的方法有：
- push() 数组末尾添加
- pop() 数组末尾取出
- shift() 数组开头取出
- unshift() 数组开头添加
- splice() 删除并插入
- sort() 排序
- reverse() 数组顺序颠倒
<ul id="demo"><li v-for = "item in items">{{item}}</li></ul><script>var vm = new Vue({el:'#demo',data:function(){return {items:[4,2,3].splice(0,2)};}})</script>
替换数组（返回一个新数组）：
数组从一个数组变为另一个数组时（记得，数组是按引用传递的），数据绑定依然生效；但前提是使用以下方法：
filter() 过滤，参数是一个函数，取其返回值为true的元素被添加到新数组
concat() 合并两个数组，返回的数组是合并后的
slice() 返回数组的拷贝，从开始索引到结束索引（前含后不含）
track-by：
有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。
例如，假定数据为：
{items: [{ _uid: '88f869d', ... },{ _uid: '7496c10', ... }]}
然后可以这样给出提示：
<div v-for="item in items" track-by="_uid"><!-- content --></div>
然后在替换数组 items 时，如果 Vue.js 遇到一个包含 _uid: '88f869d' 的新对象，它知道它可以复用这个已有对象的作用域与 DOM 元素。
track-by $index
如果没有唯一的键供追踪，可以使用 track-by="$index"，它强制让 v-for 进入原位更新模式：片断不会被移动，而是简单地以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。
这让数据替换非常高效，但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变，不能同步临时状态（比如 <input> 元素的值）以及组件的私有状态。因此，如果 v-for 块包含 <input> 元素或子组件，要小心使用 track-by="$index"。
问题：
vue.js不能检测到下面数组变化：
- 直接用索引设置元素，如 vm.items[0] = {}
解决方案，$set()方法，demo.items.$set( 0 , {childMsg:'changed!'} )
- 修改数据的长度，如 vm.items.length = 0
解决方案：只需要用一个空数组替换items
从目标数组中查找并删除元素，在内部调用splice()，this.items.$remove(item)
<ul id="demo"><li v-for = "item in items">{{item.name}}</li></ul><button onclick = "change()">移除</button><script>var test = {name:'d'}var vm = new Vue({el:'#demo',data:{items:[{name:'a'},{name:'b'},{name:'c'}]},})vm.items.push(test);function change(){vm.items.$remove(test);}</script>
对象v-for
作用域内还可以访问另一个特殊变量$key
<ul id="repeat-object" class="demo"><li v-for="value in object">{{ $key }} : {{ value }}</li></ul>new Vue({el: '#repeat-object',data: {object: {FirstName: 'John',LastName: 'Doe',Age: 30}}})
也可以给对象的键提供一个别名：
<div v-for="(key, val) in object">{{ key }} {{ val }}</div>
值域v-for
v-for 也可以接收一个整数，此时它将重复模板数次。
<div><span v-for="n in 10">{{ n }} </span></div>
结果为：
Vue社区为您提供最前沿的新闻资讯和知识内容
更多推荐
2
0- 0
已为社区贡献9条内容
所有评论(0)