vue v-for 中的key属性 

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <script src="../vue.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <span>ID:
11                 <input type="text" v-model="id" />
12             </span>
13             <span>Name:
14                 <input type="text" v-model="name" />
15             </span>
16             <input type="button" value="提交" @click="btn" />
17             
18             <!-- 注意：v-for循环的时候，key属性只能使用number获取string -->
19             <!-- 注意：key在使用的时候，必须使用v-band属性绑定的形式，指定key的值 -->
20             <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，
21             如果v-for 有问题，必须 在使用v-for的同时，指定唯一大的 字符串/数字 类型 :key 值 -->
22             <p v-for="item in list" :key="item.name">
23                 <input type="checkbox">
24                 {{item.id}}---{{item.name}}
25             </p>
26         </div>
27     </body>
28     <script type="text/javascript">
29         var vm = new Vue({
30             el: '#app',
31             data: {
32                 list: [
33                     {id: 1,name: '张狗蛋'},
34                     {id: 2,name: '杨爸爸'},
35                     {id: 3,name: '张小狗蛋'},
36                     {id: 4,name: '杨大爸爸'}
37                     ],
38                 id:"",
39                 name:""
40             },
41             methods:{
42                 btn:function(){
43                     this.list.unshift({id:this.id,name:this.name});
44                 }
45             }
46         })
47     </script>
48 </html>

 

posted @ 2019-09-16 15:46  养一只Tom猫  阅读(2228)  评论(0)    收藏  举报