Vue.js学习教程之列表渲染详解
本文主要给大家介绍了关于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 用在 标签上,以渲染一个包含多个元素的块。例如:
{{ item.msg }}
数组变动检测变异方法Vue.js 包装了被观察数组的变异方法,故它们能触发视图更新。 被包装的方法有:
你可以打开浏览器的控制台,用这些方法修改上例的 items 数组。例如: 替换数组变异方法,如名字所示,修改了原始数组。相比之下,也有非变异方法,如 可能你觉得这将导致 Vue.js 弃用已有 DOM 并重新渲染整个列表——幸运的是并非如此。 Vue.js 实现了一些启发算法,以最大化复用 DOM 元素,因而用另一个数组替换数组是一个非常高效的操作。 track-by有时需要用全新对象(例如通过 API 调用创建的对象)替换数组。因为 v-for 默认通过数据对象的特征来决定对已有作用域和 DOM 元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一 ID 的属性,便可以使用 track-by 特性给 Vue.js 一个提示,Vue.js 因而能尽可能地复用已有实例。 例如,假定数据为: 然后可以这样给出提示: 然后在替换数组 items 时,如果 Vue.js 遇到一个包含 track-by $index如果没有唯一的键供追踪,可以使用 这让数据替换非常高效,但是也会付出一定的代价。因为这时 DOM 节点不再映射数组元素顺序的改变,不能同步临时状态(比如 元素的值)以及组件的私有状态。因此,如果 v-for 块包含 元素或子组件,要小心使用 问题因为 JavaScript 的限制,Vue.js 不能检测到下面数组变化: 1.直接用索引设置元素,如 2.修改数据的长度,如 为了解决问题 (1),Vue.js 扩展了观察数组,为它添加了一个 至于问题 (2),只需用一个空数组替换 items。 除了 只用这样: 对象 v-for也可以使用 v-for 遍历对象。除了 $index 之外,作用域内还可以访问另外一个特殊变量 $key。 也可以给对象的键提供一个别名: 在遍历对象时,是按 值域 v-forv-for 也可以接收一个整数,此时它将重复模板数次。 显示过滤/排序的结果有时我们想显示过滤/排序过的数组,同时不实际修改或重置原始数据。有两个办法: 1.创建一个计算属性,返回过滤/排序过的数组; 2.使用内置的过滤器 filterBy 和 orderBy。 计算属性有更好的控制力,也更灵活,因为它是全功能 JavaScript。但是通常过滤器更方便,详细见 API。 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对编程之家的支持。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |