标签：场景 NPU lan color gif char box str ack
bug图：选中id为5的元素，在最上添加元素后，变成了选中id为4的元素
bug源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p v-for="item in roles"> <input type="checkbox">{{item.id}}--{{item.name}} </p> id:<input type="text" v-model="id"> name: <input type="text" v-model="name"> <button @click="add">添加</button> </div> <script src="../JS/Vue.js"></script> <script> new Vue({ el:‘#app‘, data:{ roles:[ {id:1,name:‘雪之下雪乃‘}, {id:2,name:‘由比滨结衣‘}, {id:3,name:‘一色彩羽‘}, {id:4,name:‘川崎沙希‘}, {id:5,name:‘雪之下阳乃‘}, ], id:‘‘, name:‘‘, }, methods:{ add:function () { this.roles.unshift({id:this.id,name:this.name}) } } }) </script> </body> </html>
使用key属性标注之后
修改后的源码以及解释说明
<!-- 1、key属性的作用 用来标注v-for循环的每一项的唯一身份 2、key属性的使用注意 key属性值只能是数字或者字符串 key属性必须用v-bind来绑定 3、key属性的使用场景 在组件或者一些直接v-for循环会有bug的场景 推荐v-for循环都带上key属性 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- key的属性值必须是字符串或者数字（此处id不易重复，所以选取id）--> <p v-for="item in roles" v-bind:key="item.id"> <input type="checkbox">{{item.id}}--{{item.name}} </p> id:<input type="text" v-model="id"> name: <input type="text" v-model="name"> <button @click="add">添加</button> </div> <script src="../JS/Vue.js"></script> <script> new Vue({ el: ‘#app‘, data: { roles: [ {id: 1, name: ‘雪之下雪乃‘}, {id: 2, name: ‘由比滨结衣‘}, {id: 3, name: ‘一色彩羽‘}, {id: 4, name: ‘川崎沙希‘}, {id: 5, name: ‘雪之下阳乃‘}, ], id: ‘‘, name: ‘‘, }, methods: { add: function () { this.roles.unshift({id: this.id, name: this.name}) } } }) </script> </body> </html>
推荐v-for循环都带上key属性！！！v-for中的key属性（在组件或者直接使用v-for还会出现bug时）
标签：场景 NPU lan color gif char box str ack
原文地址：https://www.cnblogs.com/Yuigahama-Yui/p/13647003.html
