imweb 前端训练营第一次作业[更新]

上次提交作业的时候大意了，用了编辑器里面的以html脚本形式提交，提交后一直在审核 然后自己也没有提前预览看一下结果，于是就有了这次提交作业。。。

<template>
  <div id="app" style="width:600px;margin:0 auto;">
    <div class="navBar">任务列表</div>
    <div class="main">
      <h2>add tasks</h2>
      <input type="text" placeholder="add tasks" id="addTodo" v-on:keyup.enter="addTodo" v-model="todo">  
      <ul class="class-count">
        <li style="float:left;"><span>{{noSelected}}</span>个任务未完成</li>
        <li class="action" style= "float:right;">
          <a href="#">all</a>
          <a href="#">to do</a>
          <a href="#">done</a>
        </li>
      </ul>
      <h2>任务列表</h2>
      <div class="tasks">
        <span class="no-task-tip" v-show="!this.lists.length">no tasks</span>
        <ul>
          <li class="todo" :class="{completed:item.isChecked,editing:item === editTodoContent}" v-for="item in lists">
            <div class="view">
              <input type="checkbox"  class="toggle" v-model="item.isChecked">
              <label @dblclick="editTodo(item )">{{item.title}}</label>
              <button class="destory" @click="deleteTodo(item)">&times;</button>
            </div>
            <input type="text" class="edit" v-model="item.title" v-focus="editTodoContent === item" @blur="todoDone(item)" v-on:keyup.enter="todoDone(item)" v-on:keyup.left="cancelEdit(item)">
          </li>
        </ul>


      </div>
    </div>
  </div>
</template>


<script>


export default {
  data() {
    return {
      lists: [{title:"eat",isChecked:false},
              {title:"drink",isChecked:false},
              {title:"run",isChecked:false},
              {title:"drive",isChecked:false},],
      todo: "",
      editTodoContent: "",
      oldTodoTitle: ""
    }
  },
  computed:{
    noSelected:function(){
      return this.lists.filter(function(item){return !item.isChecked}).length
    }
  },
  methods: {
    addTodo(){
      this.lists.push({title:this.todo,isChecked:false})
      this.todo = ""  
    },
    deleteTodo(todo){
      let index = this.lists.indexOf(todo);
      this.lists.splice(index,1)
    },
    editTodo(todo){
      this.oldTodoTitle = todo.title;
      this.editTodoContent = todo;
    },
    todoDone(todo){
      this.editTodoContent = '';
    },
    cancelEdit(todo){
      todo.title = this.oldTodoTitle;
      this.editTodoContent = '';


    }
  },
  directives:{
    "focus":{
      update(el,binding){
        if(binding.value){
          el.focus();
        }
      }
    }
  }
}
</script>