for循环的key值绑定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <script src="../js/vue.js"></script> 8 <body> 9 <div id="app"> 10 11 <!-- 尾部添加 12 <div> 13 <label for=""> 14 ID: 15 <input type="text" v-model="id" /> 16 </label> 17 18 <label for=""> 19 Name: 20 <input type="text" v-model="name" /> 21 </label> 22 23 <input type="button" name="" id="" value="尾部添加" @click="wadd"/> 24 </div> --> 25 26 <div> 27 <label for=""> 28 ID: 29 <input type="text" v-model="id" /> 30 </label> 31 32 <label for=""> 33 Name: 34 <input type="text" v-model="name" /> 35 </label> 36 37 <input type="button" name="" id="" value="头部添加" @click="tadd"/> 38 </div> 39 40 <!-- 注意： v-for 循环的时候， key属性 只能用number 或 string， item是个对象 不能使用--> 41 <!-- 注意：key在使用的时候，必须使用 v-bind 属性绑定，指定 key 的值--> 42 <!-- 在组件中， 使用 v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 43 v-for 的同时，指定 唯一的 字符串/数字 类型 ：key 值 比如如果不绑定的话 多选按钮 无法绑定 44 item数组里的选中的数据--> 45 <p v-for="item in list" :key="item.id"> 46 <input type="checkbox" /> 47 {{ item.id}} --- {{ item.name }} 48 </p> 49 </div> 50 </body> 51 </html> 52 <script> 53 var vm = new Vue({ 54 el:'#app', 55 data:{ 56 id:'', 57 name:'', 58 list:[ 59 { id: 1, name: '哈哈' }, 60 { id: 2, name: '嘿嘿' }, 61 { id: 3, name: '呵呵' }, 62 { id: 4, name: '啦啦' }, 63 { id: 5, name: '叽叽' } 64 ] 65 }, 66 methods:{ 67 // // 尾部添加 68 // wadd(){ 69 // this.list.push({ id: this.id, name: this.name}) 70 // }, 71 //头部添加 72 tadd(){ 73 this.list.unshift({ id: this.id, name: this.name}) 74 }, 75 } 76 }) 77 </script>
效果图就不放了，最近太忙，uni-app十分紧急需要弄，这个主要就是讲的key的绑定，可以理解为 选中的 多选按钮 与 数组的key 绑定，以免数据混乱