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>
