Vue中实现Todolist（适合新手）

实现效果图


实现功能

1. 在input输入要输入的内容 回车（enter）后把内容添加到未完成中
2. 动态计算有几个未完成的任务
3. 点击未完成的复选框到已经完成中 点击已完成的复选框回到未完成
4. 双击列表中的内容，可对列表内容进行编辑 在编辑完成后，按回车enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取消编辑 还是之前的值
5. 已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（本地存储）

input输入区域

 <!-- 头部 -->
    <header>
      <!-- 头部内容 -->
      <div class="todolist">
        <div>ToDoList</div>
        <div>
          <input type="text" placeholder="添加ToDo" v-model="inputValue" @keydown.enter="submit" />
        </div>
      </div>
    </header>

已完成未完成区域

<!-- 留言内容 -->
    <div class="todolist_item">
      <!-- 未完成 -->
      <div class="todolist_item_no">
        <div>正在进行</div>
        <div>({
   {
   noList}})</div>
      </div>
      <ul class="todolist_item_text">
        <li v-for="(item,index) in ToDoList" :key="index" v-show="!item.switch">
          <!-- 复选框