2018/09/18 VUE 列表渲染

一.用v-for把一个数组对应为一组元素

v-for指令需要以item in items形式的特殊语法,items是源数据数组并且item是数组元素迭代的别名。


重点: 在v-for块中,我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。

也可以使用 of 替代 in


二. 一个对象的v-for属性迭代


注意: 在遍历对象时,是按照object.keys()遍历的, 但不能保证他的结果在不同的JavaScript引擎下是一样的


三. key

当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的track-by="$index"。

这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出


为了给VUE一个提示,需要给每个节点一个特殊的标志, 需要为没项提供一个唯一的key属性,key类似于属性

,需要用v-bind绑定动态值


尽量使用-for提供的key,,,,,,,,,,,,,,key是VUE识别节点的通用机制

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容