vue--表格操作

vue操作表格的增删，再体会一下vue的数据驱动

一个html，一个js，上代码

1.html代码

 1  

 2  

 3  

 4      charset="utf-8"> 

 5      

 6      

39      

40 

41  

42  

43      id="app"> 

44         
总共{{num}}条记录 

45          id="search"> 

46         姓名： type="text" name="name" v-model="name"> 

47         年龄： type="text" name="age" v-model="age"> 

48         职业： type="text" name="career" v-model="career"> 

49          id="insert" @click="add()">插入 

50         

51 border="1" cellspacing="0">
52 id="title">
53 姓名
54 年龄
55 职业
56 删除
57
58 v-for="(list,index) in lists">
59 {{list.name}}
60 {{list.age}}
61 {{list.career}}
62 @click="del(index)">删除
63
64
65

66
67
68

2.js代码

 1 new Vue({ 

 2     el:"#app", 

 3     data:{ 

 4         lists:[ 

 5             {name:"HaHa",age:30,career:"艺人"}, 

 6             {name:"serena",age:26,career:"程序员"}, 

 7             {name:"grace",age:26,career:"程序员"}, 

 8             {name:"mino",age:24,career:"歌手"}, 

 9         ], 

10         num:4, 

11         name:"", 

12         age:0, 

13         career:"" 

14     }, 

15     methods:{ 

16         add:function () { 

17             if (this.name!='' && this.career!='') { 

18                 this.lists.unshift({name:this.name,age:this.age,career:this.career}) 

19             }else{ 

20                 alert("请填写完整信息") 

21             } 

22             this.num=this.lists.length 

23         }, 

24         del:function (i) {   //不能用delete命名,是vue已有的方法 

25             this.lists.splice(i,1) 

26             this.num=this.lists.length 

27         } 

28     } 

29 }) 

3.开始的界面

4.插入一条信息，但是没有输入完整，弹出提示框

4.插入一条信息，输入完整

4.删除信息

小编这样的新手还是得多写写代码。。。