IMWeb训练营作业

来源：互联网发布：淘宝闲置物品能退货吗编辑：程序博客网时间：2024/05/22 12:39

图片
这里写图片描述

关键代码

<div class="hello">    <v-header></v-header>    <div class="tasks">      <h2>添加任务</h2>      <input type="text" placeholder="添加新任务" @keyup.enter="addTodo" v-model='todo'>      <h2 v-show='!list.length'> 还没有添加任务 </h2>      <p v-show='list.length'>        <span>{{ noCheckLength}}个任务未完成</span>        <span class="task-btn one">所有任务</span>        <span class="task-btn">未完成任务</span>        <span class="task-btn">完成的任务</span>      </p>      <ul>        <li v-for='item in list' :class="{editing : item === edtortodos}">          <div>            <input type="checkbox" v-model='item.isChecked'>            <label :class="{'dete-text':item.isChecked}" @dblclick='edtortodo(item)'>{{item.title}} </label>            <button @click='deleteTodo(item)'>button</button>          </div>          <input type="text" class="newTodo" v-model='item.title' v-foucs='edtortodos === item' @blur='edtorTodoed(item)'  @keyup.enter='edtorTodoed(item)' @keyup.esc='canceTodo(item)'/>        </li>      </ul>    </div>  </div>

  methods: {    addTodo: function(ev) { //添加任务      console.log(ev);      this.list.push({        title: this.todo,        isChecked: false      });      this.todo = '';    },    deleteTodo(todo) { //删除条目      var index = this.list.indexOf(todo);      this.list.splice(index, 1)    },    edtortodo(todo) {  //编辑任务      //console.log(todo);      this.beforeTitle = todo.title;      this.edtortodos = todo;    },    edtorTodoed(todo){  //编辑任务成功      this.edtortodos = '';    },    canceTodo(todo){  //取消编辑      todo.title = this.beforeTitle;      this.edtortodos = ''    }  },

0 0