实现添加和删除操作：
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>
时间： 2024-10-13 02:35:12