宝安做网站公司,科技感强的网站,优质的网站建设公司,做有源代码的网站有什么好处列表渲染 实际开发中#xff0c;使用每条数据的唯一标识作为key,也就是对于数组列表#xff0c;对象中的属性如#xff1a;id、手机号、身份证号、学号等唯一值#xff0c;对象列表同理 只要不对列表的逆序添加#xff0c;逆序删除等破坏顺序的操作#xff0c;仅用于渲染…列表渲染 实际开发中使用每条数据的唯一标识作为key,也就是对于数组列表对象中的属性如id、手机号、身份证号、学号等唯一值对象列表同理 只要不对列表的逆序添加逆序删除等破坏顺序的操作仅用于渲染和展示。使用index作为key是没有问题的。 bodyul//:key是对象数组的身份证对数组中的每个对象进行遍历li v-forp in persons :keyp.id{{name}}--{{age}}/lili v-for(p,index) :keyindex {{name}} -----{{age}}/li//对象遍历li v-for(value,k) of car :keyk {{k}} -----{{value}}/li/ul
/body
scriptconst vm new Vue({el:#root,data: {//数组列表persons:[{id: 001,name: marry,age:12},{id: 002,name: axios,age:11},{id: 003,name: ajax,age:15}]//对象列表car: {name: 大众,price: 1222,color: black}}})
/script key的底层原理 遍历列表时vue将初始数据转成虚拟DOM页面vue会给虚拟DOM添加key值之后虚拟DOM转成真实DOM放入页面。 如果用户修改了页面信息vue根据新的数据生成新的虚拟DOM新的虚拟DOM与虚拟DOM的数据对比 使用index作为key的问题 用keyindex对原本的数组索引的顺序造成了破坏。也就是新的虚拟DOM与虚拟DOM的对象在索引位置为0的位置属性值不一致就会实现新的虚拟DOM与虚拟DOM的对象属性相同的部分直接用虚拟DOM的对象属性。不相同的部分用新的虚拟DOM对象属性。缺点一产生新的DOM更新效率低。缺点二对象属性使用输入类的DOM会产生错误 如果新的虚拟DOM与虚拟DOM的对象索引号匹配不上则创建新的真实DOM渲染到页面上。 bodyul!--once为点击一次就失效--button click.onceadd点我添加一个对象到数组中/buttonli v-for(p,index) :keyindex {{name}} -----{{age}}!--加入文本框--input typetext /li/ul
/body
scriptconst vm new Vue({el:#root,data: {//数组属性persons:[{id: 001,name: marry,age:12},{id: 002,name: axios,age:11},{id: 003,name: ajax,age:15}]},methods: {add(){const p {id: 004,name:lala, age: 20}//push方法是往数组属性索引为0的位置添加一组对象this.person.push(p);}}})
/script 使用index作为key的思维图
