todolist最简单的待办事项列表

代码展示

在这里插入代码片
```<template>
  <div class="box">
    <!-- 输入框 -->
    Todolist
    <input type="text" v-model="inputValue" @keydown.enter="submit"  placeholder="添加TODO" class="q1"/>
    <!-- 提交按钮 -->
    <!-- <button @click="submit">提交</button> -->

    <h3>进行中 ({{noLength}})</h3>
    <ul>
      <!-- for循环 -->
      <li v-for="(item,index) in todoList" :key="index" v-show="!item.done">
        <input type="checkbox" @click.prevent="change(item,true)" />

        <!-- 双击修改  键盘事件 enter 确定   esc 退出修改 -->
        <span v-show="index!=updateIndex" @dblclick="update(item,index)">{{item.title}}</span>
        <input
    
          v-show="index==updateIndex"
          type="text"
          v-model="item.title"
          @keydown.enter="updateSave"
          @keydown.esc="backData(item)"
        />

        <!-- 传数据 -->
        <!-- {{item.title}} -->
        <!-- //删除 -->
        <span class="del-btn" @click="del(index)">X</span>

      </li>
    </ul>

    <h3>已完成 ({{yesLength}})</h3>

    <ul>
      <!-- for循环 -->
      <li v-for="(item,index) in todoList" :key="index" v-show="item.done">
        <input type="checkbox" checked @click.prevent="change(item,false)" />
       
        <!-- 双击修改  键盘事件 enter 确定   esc 退出修改 --> 
<span v-show="index!=updateIndex" @dblclick="update(item,index)">{{item.title}}</span>
        <input
          v-show="index==updateIndex"
          type="text"
          v-model="item.title"
          @keydown.enter="updateSave"
          @keydown.esc="backData(item)"
        />

        <!-- 传数据 -->

        <!-- {{item.title}}/ -->
        <!-- //删除 -->
        <span class="del-btn" @click="del(index)">X</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    //数据展示
  data() {
    return {
      inputValue: "",
      todoList: [],
      updateIndex: -1,
      tempValue: ""
    };
  },

  // 初始化数据
  created() {
    let todoList = localStorage.todoList;
    if (todoList) {
      this.todoList = JSON.parse(todoList);
    }
  },
    //  computed计算属性 计算结果会缓存,只有当依赖值改变才会重新计算
  computed: {
    noLength() {
      let count = 0;
      this.todoList.map(item => {
        if (!item.done) {
          count++;
        }
      });
      return count;
    },
    yesLength() {
      let count = 0;
      this.todoList.map(item => {
        if (item.done) {
          count++;
        }
      });
      return count;
    }
  },

  methods: {
    //用submit提交
    submit() {
      this.todoList.push({
        title: this.inputValue,
        done: false
      });
      (this.inputValue = ""), this.save();
    },

    // 封装本地存储 进行调用
    save() {
      localStorage.todoList = JSON.stringify(this.todoList);
    },
    // 用v-show方法 进行显示提交和隐藏 显示 进行中 未完成 的数字
    change(item, checked) {
      if (checked) {
        item.done = true;
      } else {
        item.done = false;
      }
      this.save();
    },

        //双击修改 
    update(item, index) {
            // alert('1')
      this.tempValue = item.title;
      this.updateIndex = index;
      
    },
    // 键盘事件 enter
    updateSave() {
      this.save();
      this.updateIndex = -1;
    },
    //键盘事件 esc
    backData(item) {
      item.title = this.tempValue;
      this.updateIndex = -1;
    },

    // 找下标删除
    del(index) {
      this.todoList.splice(index, 1);
      this.save();
    }
  }
};
</script>

<style>


.box{
    width: 100%;
    height: 50px;
    background: rgb(170, 158, 158);
    text-align:center
}
ul{
    list-style: none;
 margin-left: -250px;
    
}   
h3{
    margin-left: -250px;
}
.q1{
    width: 300px;
    height: 30px;
    border:1px solid;
    border-radius: 25px;
    padding-top: -10px;
outline: none;
}
.del-btn {
  margin-left: 20px;
  color: red;
  cursor: pointer;
}
</style>
## 图片
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200604203615693.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE5MzcxNw==,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200604203700439.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE5MzcxNw==,size_16,color_FFFFFF,t_70)