本文主要给大家介绍了关于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()
pop()
shift()
unshift()
splice()
sort()
reverse()
你可以打开浏览器的控制台,用这些方法修改上例的 items 数组。例如:example1.items.push({ message: 'Baz' })
。
替换数组
变异方法,如名字所示,修改了原始数组。相比之下,也有非变异方法,如 filter()
,concat()
和 slice()
,不会修改原始数组而是返回一个新数组。在使用非变异方法时,可以直接用新数组替换旧数组:
可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。
track-by
有时需要用全新对象(例如通过 API 调用创建的对象)替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一 ID 的属性,便可以使用 track-by 特性给 Vue.js 一个提示,Vue.js 因而能尽可能地复用已有实例。
例如,假定数据为:
然后可以这样给出提示: