批量清除todo练习参考答案

练习一

非常简单,用 if 指令,根据是否存在某类型的 todo 来决定该类型的按钮显示或者隐藏即可,具体的有:

  • 如果不存在未完成的 todo,全部标为完成、进行中的按钮隐藏。
  • 如果不存在已完成的 todo,已完成、清除已完成的按钮隐藏。
  • 若没有 todo,筛选和清除等按钮全隐藏,显示“添加我的第一个 todo”,若不存在未完成的 todo,显示“全部完成,你真是太优秀了”,否则显示“剩余 x 项未完成”。

首先增加两个计算属性,返回全部已完成的 todo 和其数量,同时顺便把 filteredTodos 计算属性重构一下:

computed: {
    ...
    completedTodos: function () {
        return this.todos.filter(todo => todo.completed)
    },
    completedTodosCount: function () {
        return this.completedTodos.length
    },
    filteredTodos: function () {
        if (this.intention === 'ongoing') {
            return this.leftTodos
        } else if (this.intention === 'completed') {
            return this.completedTodos
        } else {
            // 其它未定义的意图我们为其返回全部 todos,
            // 这里面已经包含了 all 意图了
            return this.todos
        }
    }

然后根据这些计算属性判断相应按钮和文字的显示和隐藏即可:

<input v-if="leftTodosCount"
       type="button"
       value="全部标为完成"
       @click="markAllAsCompleted"/>
<span v-if="leftTodosCount">剩余 {{leftTodosCount}} 项未完成 ---</span>
<span v-else-if="completedTodosCount">全部完成,你真是太优秀了!</span>
<span v-else>添加我的第一个todo</span>
<span v-if="todos.length">筛选:
  <input type="button"
         class="selected"
         value="全部"
         @click="intention='all'"/>
  <input v-if="leftTodosCount"
         type="button"
         value="进行中"
         @click="intention='ongoing'"/>
  <input v-if="completedTodosCount"
         type="button"
         value="已完成"
         @click="intention='completed'"/>
  <input v-if="completedTodosCount"
         type="button"
         value="清除已完成"
         @click="clearCompleted"/>
  <input type="button"
         value="清除全部"
         @click="clearAll"/>
</span>

练习二

清除时确认的功能和之前删除单个 todo 的功能类似,代码如下:

clearCompleted: function () {
    if (!confirm('确认清除全部已完成的待办事项?')) {
        return
    }
    this.todos = this.todos.filter(todo => !todo.completed)
},
clearAll: function () {
    if (!confirm('确认清除全部待办事项?')) {
        return
    }
    this.todos = []
}

回收站的功能略微复杂,我们来逐步分析。

首先我们需要改造一下 todo 模型,为其增加一个 removed 属性,这个属性用于标识 todo 是否已经被删除,注意这次删除 todo 时不再是直接从 todos 数组里删除,而是将其移到回收站(增加一个回收站数组用于存放删除的 todo),removed 属性的值会给我们今后为是否删除的 todo 执行不同操作时带来诸多方便,具体修改如下:

data: function () {
    return {
        todos: [],
        recycleBin: [], // 用于存放已经删除的 todo
        newTodoTitle: '',
        editedTodo: null, // 用户暂存编辑前的 todo 状态
        intention: 'all', // 默认为 all
    }
},
methods: {
    addTodo: function () {
        this.todos.push(
            // 修改后的 todo 模型
            {id: id++, title: this.newTodoTitle, completed: false, removed: false}
        );
        this.newTodoTitle = '';
    },
    ...
},

然后当我们删除 todo 或者清除 todo 时,应该把删除的 todo 插入 recycleBin 数组中,以便后续还原,即相应修改 removeTodoclearAllclearCompleted 方法的逻辑:

removeTodo: function (todo) {
    let removedTodo = this.todos.splice(this.todos.indexOf(todo), 1)[0];
    removedTodo.removed = true;
    this.recycleBin.unshift(removedTodo);
},
clearCompleted: function () {
    if (!confirm('确认清除全部已完成的待办事项?')) {
        return
    }
    this.completedTodos.map(todo => todo.removed = true);
    this.recycleBin.unshift(...this.completedTodos);
    this.todos = this.leftTodos;
},
clearAll: function () {
    if (!confirm('确认清除全部待办事项?')) {
        return
    }
    this.todos.map(todo => todo.removed = true);
    this.recycleBin.unshift(...this.todos);
    this.todos = [];
},

要注意熟悉 JavaScript 数组的插入删除等操作,具体请查看 js 的文档,这里不再详细说明。

然后增加一个回收站按钮,点击后进入回收站,显示全部已删除的 todo:

<span v-if="todos.length || recycleBin.length">筛选:
  ...
  <input v-if="recycleBin.length"
         type="button"
         value="回收站"
         @click="intention='removed'"/>
</span>

这里回收站这个按钮和已完成、进行中等筛选按钮是类似的,它对应的 intention 是 removed,相应的要修改计算属性 filteredTodos 的逻辑,当 intention 为 removed 是能返回已删除的数组列表。

filteredTodos: function () {
    if (this.intention === 'ongoing') {
        return this.leftTodos
    } else if (this.intention === 'completed') {
        return this.completedTodos
    } else if (this.intention === 'removed') {
        return this.recycleBin
    } else {
        // 其它未定义的意图我们为其返回全部 todos,
        // 这里面已经包含了 all 意图了
        return this.todos
    }
}

现在看到回收站中的 todo 后面的按钮依然为删除,正确地应该显示为还原按钮,用于还原todo,可以根据 todo removed 属性的值来判断应该显示哪个按钮:

<li v-for='todo in filteredTodos' :key='todo.id'>
  <span :class="{completed: todo.completed}"
        @dblclick="editTodo(todo)">{{ todo.title }}</span>
  <input type="button"
         value="标为完成"
         @click="markAsCompleted(todo)"/>
  <input v-if="todo.removed" type="button" value="还原" @click="restoreTodo(todo)"/>
  <input v-else="todo.removed" type="button" value="删除" @click="removeTodo(todo)"/>
  ...
</li>

还原按钮绑定了一个 restoreTodo 方法,来实现一下:

restoreTodo: function (todo) {
    todo.removed = false;
    this.todos.unshift(todo);
    let pos = this.recycleBin.indexOf(todo);
    this.recycleBin.splice(pos, 1);
},

逻辑很简单,就是将已删除的 todo,从回收站数组移除,然后插入 this.todos,同时要记得将 removed 设置回 false。

类似的,我们还可以实现一次还原全部 todo,清空回收站的功能,其实现方法都大同小异,主要就是对 this.todos 和 recycleBin 数组的操作,请自行实现。

-- EOF --


0 条评论 / 0 人参与