vue todolist 1.0

Posted 2021-01-22 spinoza

 1 <template>
 2 
 3 
 4   <div id="app"> 
 5       
 6       <input type="text" v-model=‘todo‘ />
 7 
 8       <button @click="doAdd()">+增加</button>
 9 
10       <br>
11 
12       <hr>
13 
14       <br>
15 
16       <ul>
17 
18         <li v-for="(item,key) in list">
19 
20           {{item}}   ----  <button @click="removeData(key)">删除</button>
21         </li>
22       </ul>
23 
24 
25   </div>
26 </template>
27 
28 <script>
29 
30     export default {     
31       data () { 
32         return {
33           todo:‘‘ ,
34           list:[]
35         }
36       },
37       methods:{
38 
39         doAdd(){
40             //1、获取文本框输入的值   2、把文本框的值push到list里面
41 
42             this.list.push(this.todo);
43 
44             this.todo=‘‘;
45         },
46         removeData(key){
47 
48             // alert(key)
49 
50             //splice  js操作数组的方法
51 
52             this.list.splice(key,1);
53         }
54       }
55 
56     }
57 </script>
58 
59 
60 <style lang="scss">
61 
62 
63 
64 </style>