【第五节】列表渲染
文章目录
- 列表渲染
-
- v-for
- template v-for
- 数组变动检测
-
- 变异方法 替换数组
- track-by
- track-by $index
- 问题
- 对象 v-for
- 值域 v-for
- 显示过滤/排序的结果
列表渲染
v-for
使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为 item in items ，items是数据数组， item 是当前数组元素的别名:
另外，你可以为索引指定一个别名(如果 v-for 用于一个对象，则可以为对象的键指定一个别名)
<div v-for="(index,item)in items">
{{ index}}{{ item.message }}
</div>
从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法
HTML
<div v-for="item of items"></div>
template v-for
类似于 template v-if ，也可以将 v-for 用在 标签上，以渲染一个包含多个元素的块。例如:
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
数组变动检测
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
打开浏览器的控制台，用这些方法修改上例的items 数组。例如:example1.items.push({ message:'Baz'})。
变异方法 替换数组
变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如filter(),concat()和 slice()，不会修改原始数组而是返回一个新数组。在使用非变异方法时可以直接用新数组替换旧数组:
example1.items =example1.items.filter(function(item){return item.message.match(/Foo/)
可能觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表–幸运的是并非如此。Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。
track-by
有时需要用全新对象(例如通过 API调用创建的对象)替换数组。因为 v-for默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一ID 的属性，便可以使用 track-by 特性给 vue.js个提示，Vue.js 因而能尽可能地复用已有实例。
例如，假定数据为:
{items :[{_uid:'88f869d',...},{_uid :'7496c10',...}]}