vue todolist待办事项完整

Posted 2021-01-22 spinoza

  1 <template>
  2 
  3 
  4   <div id="app"> 
  5       
  6       <input type="text" v-model=‘todo‘ @keydown="doAdd($event)" />
  7 
  8 
  9       <br>
 10 
 11       <hr>
 12 
 13       <br>
 14 
 15     <h2>进行中</h2>
 16           <ul>
 17 
 18             <li v-for="(item,key) in list" v-if="!item.checked">
 19 
 20               <input type="checkbox" v-model=‘item.checked‘> {{item.title}}   ----  <button @click="removeData(key)">删除</button>
 21             </li>
 22           </ul>
 23 
 24 
 25     <br>
 26     <h2>已完成</h2>
 27     <ul class="finish">
 28 
 29       <li v-for="(item,key) in list" v-if="item.checked">
 30 
 31           <input type="checkbox" v-model=‘item.checked‘> {{item.title}} ----<button @click="removeData(key)">删除</button>
 32       </li>
 33     </ul>
 34 
 35 
 36     <h2 v-if=‘ok‘>这是一个ok</h2>
 37 
 38     <h2 v-if=‘!ok‘>这是一个No</h2>
 39 
 40     <button @click="getList()">获取list的值</button>
 41 
 42   </div>
 43 </template>
 44 
 45 <script>
 46 
 47   /*
 48        [‘录制nodejs‘,‘录制ionic‘]
 49 
 50 
 51           [
 52 
 53             {
 54               title:‘录制nodejs‘,
 55               checked:true
 56             },
 57               {
 58               title: ‘录制ionic‘,
 59               checked: false
 60             }
 61           ]
 62           
 63           */
 64 
 65     export default {     
 66       data () { 
 67         return {
 68           ok:false,
 69           todo:‘‘ ,
 70           list: [
 71 
 72             {
 73               title: ‘录制nodejs‘,
 74               checked: true
 75             },
 76             {
 77               title: ‘录制ionic‘,
 78               checked: false
 79             }
 80           ]
 81 
 82          
 83         }
 84       },
 85       methods:{
 86 
 87         doAdd(e){
 88               console.log(e.keyCode)
 89 
 90               if(e.keyCode==13){
 91               //1、获取文本框输入的值   2、把文本框的值push到list里面
 92               this.list.push({
 93 
 94                 title: this.todo,
 95                 checked: false
 96               })
 97 
 98               this.todo=‘‘;
 99             }
100         },
101         removeData(key){
102 
103             // alert(key)
104 
105             //splice  js操作数组的方法
106             this.list.splice(key,1);
107         },
108 
109         getList(){
110 
111           console.log(this.list)
112         }
113       }
114 
115     }
116 </script>
117 
118 
119 <style lang="scss">
120 
121 .finish{
122 
123   
124   li{
125     background:#eee;
126   }
127 }
128 
129 </style>