html中如何循环数组渲染dom,列表渲染 之 v-for遍历数组和对象(利用key属性实现高效更新)...
(1) 遍历数组和对象Document列表{{list[0]}}{{list[1]}}{{list[2]}}{{list[3]}}遍历数组{{item}}{{index}}-{{item}}遍历对象{{item}}{{key}}：{{item}}{{index}}：{{key}}：{{item}}var vm = new Vue({el:"#app",data:{list:["火龙果","龙眼",
·
(1) 遍历数组和对象
Document列表
- {{list[0]}}
- {{list[1]}}
- {{list[2]}}
- {{list[3]}}
遍历数组
- {{item}}
- {{index}}-{{item}}
遍历对象
- {{item}}
- {{key}}：{{item}}
- {{index}}：{{key}}：{{item}}
var vm = new Vue({
el:"#app",
data:{
list:["火龙果","龙眼","猕猴桃","樱桃"],
user:{
name:"liy",
phone:"123456"
}
}
});
(2) key属性的作用
说明：在列表中间节点插入新的数据节点时，即若希望在B和C之间加入一个F，Diff算法(Vue的虚拟DOM的different算法)会将之前的C更新为F、D更新为C、E更新为D、然后再更新E，效率很低。
中间插入.png
key的作用：使用key来给每一个节点添加一个唯一标识，此时Diff算法就可以正确地识别此节点 并 找到正确的位置插入新的节点，从而高效地更新虚拟DOM，提升性能。
注意：我们在使用v-for时，建议为对应的元素或组件添加一个key属性；但是key需要具有唯一性，可使用item作为key，使用index作为key值其实无意义(并不能提升更新效率)。
Document- {{item}}
var vm = new Vue({
el:"#app",
data:{
list:["火龙果","龙眼","猕猴桃","樱桃"]
}
});
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)