美文网首页
2018/09/18 VUE 列表渲染

2018/09/18 VUE 列表渲染

作者: 竹溪穆褕 | 来源:发表于2017-10-19 22:14 被阅读32次

一.用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识别节点的通用机制

相关文章

网友评论

      本文标题:2018/09/18 VUE 列表渲染

      本文链接:https://www.haomeiwen.com/subject/vxmbsxtx.html