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>