项目练习——备忘录(增删改查)

Todo List 实现

我们先来设计最基础的功能，Todo List 一般用来记录备忘的，最简单的功能包括（如图 1）：
(1) 新增一条备忘。
(2) 修改该条备忘。
(3) 选择/全选删除某条备忘。
(4) 将某条备忘设置成已完成。
(5) 快速删除已完成的备忘。

图 1 Todo List 基本功能

一、设计数据结构

这个界面中，我们需要有以下的数据：备忘列表、新增备忘内容和修改中的备忘信息，我们在data中添加每个数据对应的变量：

export default {
  // ...其他配置
  data() {
    return {
      id: 0, // li的id
      todos: [], // 所有的备忘列表
      newTodo: "", // 新增的备忘
      editedTodo: {} // 修改中的备忘
    };
  }
};

备忘列表todos用数组实现，新增备忘内容newTodo直接用字符串来表示，而修改中的备忘editedTodo由于需要维护修