vue添加和删除
实现添加和删除操作：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>demo1</title> 9 <script src="https://cdn.bootcss.com/vue/2.4.1/vue.js"></script> 10 <style> 11 table{ 12 margin-top: 5px; 13 width:300px; 14 border-collapse: collapse; 15 border: 1px solid #ccc; 16 } 17 table > tr>th,table>tr>td{ 18 height: 25px; 19 line-height: 25px; 20 } 21 22 </style> 23 </head> 24 25 <body> 26 <div id="app"> 27 <form> 28 title:<input type="text" v-model="title"> <br> 29 desc:<input type="text" v-model="desc"> <br/> 30 <input type="button" value="add todo item" v-on:click="addItem()" /> 31 </form> 32 <table style="width:300px;border-collapse:collapse" border="1"> 33 <tr> 34 <th>title</th> 35 <th>desc</th> 36 <th></th> 37 </tr> 38 <tr v-for="(todoItem,index) in todolist"> 39 <td>{{todoItem.title}}</td> 40 <td>{{todoItem.desc}}</td> 41 <td><input type="button" value="remove" @click="remove(index)" /></td> 42 </tr> 43 </table> 44 </div> 45 <script> 46 var TodoItem =function(title, desc) { 47 48 this.title = title; 49 this.desc = desc; 50 51 } 52 53 new Vue({ 54 el: '#app', 55 data: { 56 todolist:[], 57 title:'', 58 desc:'' 59 }, 60 methods:{ 61 addItem(){ 62 this.todolist.push(new TodoItem(this.title,this.desc)) 63 64 this.title=this.desc=''; 65 66 }, 67 remove(index){ 68 this.todolist.splice(index,1); 69 } 70 71 } 72 }) 73 </script> 74 </body> 75 76 </html>
