vue todolist待办事项完整

  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>

原文地址：https://www.cnblogs.com/Spinoza/p/10008926.html