Vue_v-for指令中key值的使用
v-for="(item, i) in list"> {{item.name}} // 创建 Vue 实例...vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等,因为vue...
·
v-for(item in listArray):key="val"中key值的作用:
- 比如在id为5的对象上选中,如果没有指定(绑定)Key值,浏览器会记住这组数据的它的索引位置
- 数据顺序一旦发生改变,选中项就会出现Bug(追加还好,索引不变,在前面追加就会改变数据顺序,索引改变,选中项也会发生变化)
- Key值是每一项的唯一性的标志,数据顺序发生变化,浏览器会根据Key值渲染对应的原来的样式和状态
- Key:值类型:–字符串-Number (不能是对象)
- 设置好Key值,索引值虽然变化了,但是选中项(原有状态)依然不变
<p v-for="(item,i) in plist" :key="item.id"> {{item.id}}----{{item.name}}----{{i}}</p>
循环的数据不能让索引Index开头即本实例中不能让i开头,不然key值不生效(让name和id开头都可以,一定要是对象内的属性)。
//删除它们最前面的一项,改变原有选中项的索引位置,如果不指定key,浏览器会自动匹配新索引项
this.plist.shift();
//--------
<p v-for="(item,i) in plist" :key="item.id">
<!--设置好Key值,索引值虽然变化了,但是选中项(原有状态)依然不变-->
<input type="checkbox"></input>
{{item.id}}----{{item.name}}----{{i}}</p>
更多推荐
已为社区贡献1条内容
所有评论(0)