本文主要给大家介绍了关于Vue.js列表渲染的相关资料，分享出来给大家参考学习，下面来看看详细的介绍：
v-for
可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法，形式为item in items，items 是数据数组，item 是当前数组元素的别名：
示例：
在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index，正如你猜到的，它是当前数组元素的索引：
另外，你可以为索引指定一个别名（如果 v-for 用于一个对象，则可以为对象的键指定一个别名）：
从 1.0.17 开始可以使用 of 分隔符，更接近 JavaScript 遍历器语法：
template v-for
类似于 template v-if，也可以将 v-for 用在 标签上，以渲染一个包含多个元素的块。例如：
数组变动检测
变异方法
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。
被包装的方法有：
push()@H_301_66@pop()@H_301_66@shift()@H_301_66@unshift()@H_301_66@splice()@H_301_66@sort()@H_301_66@reverse()@H_301_66@
你可以打开浏览器的控制台，用这些方法修改上例的 items 数组。例如：example1.items.push({ message: 'Baz' }) @H_301_66@。
替换数组
变异方法，如名字所示，修改了原始数组。相比之下，也有非变异方法，如 filter()@H_301_66@,concat()@H_301_66@ 和 slice()@H_301_66@ ，不会修改原始数组而是返回一个新数组。在使用非变异方法时，可以直接用新数组替换旧数组：
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法，以最大化复用 DOM 元素，因而用另一个数组替换数组是一个非常高效的操作。
track-by
有时需要用全新对象（例如通过 API 调用创建的对象）替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度，这可能导致重新渲染整个列表。但是，如果每个对象都有一个唯一 ID 的属性，便可以使用 track-by 特性给 Vue.js 一个提示，Vue.js 因而能尽可能地复用已有实例。
例如，假定数据为：
然后可以这样给出提示：
