vue实现简单的todolist

点击预览

 

<div id="app"> 
    <input type="text" class="form-control" v-model="task">
    <button class="btn btn-default" v-on:click="add">添加</button>
     <button class="btn btn-success" @click="completed">完成</button>
      <button class="btn btn-danger" @click = "deleted">删除</button>
      <table class="table table-hover">
          <thead>
              <th></th>
              <th>任务名称</th>
              <th>时间</th>
              <th>完成</th>
          </thead>
          <tbody>
              <tr v-for="(item,index) in tasks">
                  <td><input type="checkbox" v-bind:value="index"
                  v-model="checkedNames"></td>
                  <td>{{item.name}}</td>
                  <td>{{item.time}}</td>
                  <td>{{item.complete?'完成':'未完成'}}</td>
              </tr>
          </tbody>
      </table>
</div>

new Vue({
  el: '#app',
  data: {
    tasks: [
      
    ],
    task: '',
    selected: '',
    checkedNames: []
  },
  created: function() {
  
  },
  methods: {
     add: function() {
       this.tasks.push({
          name: this.task,
          time: new Date().toLocaleString(),
          complete: false
       })
       this.task = ''
       this.checkedNames = []
     },
     completed:function(){
     	  var arr = this.tasks.length - 1
      	for(var i= arr; i>=0; i--) {
               console.log(this.checkedNames[i])
             for(var j=0; j<this.checkedNames.length; j++) {
                if(this.checkedNames[j] == i) {
                   
                    this.tasks[i].complete = true
                }
             }
           
        }
     },
     deleted: function() {
        var arr = this.tasks.length - 1
      	for(var i= arr; i>=0; i--) {
               console.log(this.checkedNames[i])
             for(var j=0; j<this.checkedNames.length; j++) {
                if(this.checkedNames[j] == i) {
                    this.tasks.splice(i,1)
                    console.log('-----------')
                    console.log(this.checkNames)
                }
             }
           
        }
        this.checkedNames = []
     }
  }
})