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 綁定，以免數據混亂