Vue实现todoList功能

具体的一些功能：

1.按下enter键，文本框里面的内容进到正在进行中里面，文本框内容清空。

2.按下复选框，为true的话进入到已完成任务栏里面，为false的话进入到正在进行任务栏里面。

3.双击内容实现可修改内容功能，按下esc返回为修改之前的数据，失去光标或者按下enter键确定修改内容。

4.按下删除键，可这一条的数据进行删除，同时把本地数据进行修改。

5.实现本地储存功能，页面或者浏览器关闭再打开不会丢失数据，所有的数据都储存到本地数据中。

6.实现原理：实际上删除、修改、增加都是对本地数据进行修改，然后再渲染到页面上。

CSS样式代码：

 <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      ol,
      li {
        list-style: none;
      }
      .nav {
        width: 100%;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .nav h2 {
        color: white;
      }
      input[type="text"] {
        margin-left: 30px;
        width: 300px;
        height: 30px;
        border: 0;
        border-radius: 5px;
        color: burlywood;
        font-size: 18px;
        padding-left: 10px;
      }
      input[type="checkbox"] {
        width: 25px;
        height: 25px;
      }
      .list li {
        display: flex;
        justify-content: space-between;
        padding: 10px 100px;
      }
      ul,
      ol,
      li {
        list-style: none;
        margin: 5px 0;
      }
      li span {
        width: 150px;
        display: inline-block;
        text-align: left;
        color: rgb(14, 231, 220);
      }
      body {
        background-color: beige;
      }
      ol li {
        background-color: rgb(160, 153, 153);
      }
      ul li {
        background-color: coral;
      }
      button {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 24px;
      }
    </style>

HTML页面结构代码：

<div id="app">
      <div class="nav">
        <h2>Todolist</h2>
        <input type="text" v-model.trim="temp" @keyup.enter="addItem()" />
      </div>
      <h2>正在进行，还有{{undoList.length}}项任务</h2>
      <ul class="list">
        <li class="item" v-for="item in undoList" :key="item.name">
          <input type="checkbox" v-model="item.done" />
          <!-- 如果状态为0 显示文本 -->
          <span
            v-show="item.state==0"
            @dblclick="item.state=1;tempEdit=item.name"
            >{{item.name}}</span
          >
          <!-- 如果状态为1 就显示输入框 -->
          <input
            type="text"
            v-model="tempEdit"
            v-show="item.state==1"
            @keyup.esc="item.state=0;tempEdit=item.name"
            @keyup.enter="item.state=0;item.name=tempEdit"
            @blur="item.state=0;item.name=tempEdit"
          />
          <button @click="removeItem(item)">X</button>
        </li>
      </ul>
      <h2>已经完成了{{doneList.length}}项任务</h2>
      <ol class="list">
        <li class="item" v-for="item in doneList" :key="item.name">
          <input type="checkbox" v-model="item.done" />
          <!-- 如果状态为0 显示文本 -->
          <span
            v-show="item.state==0"
            @dblclick="item.state=1;tempEdit=item.name"
            >{{item.name}}</span
          >
          <!-- 如果状态为1 就显示输入框 -->
          <input
            type="text"
            v-model="tempEdit"
            v-show="item.state==1"
            @keyup.esc="item.state=0;tempEdit=item.name"
            @keyup.enter="item.state=0;item.name=tempEdit"
            @blur="item.state=0;item.name=tempEdit"
          />
          <button @click="removeItem(item)">X</button>
        </li>
      </ol>
    </div>

JS代码：

 <script>
    var vm = new Vue({
      el: "#app",
      data() {
        return {
          //清单列表
          // getItem是获取本地存储数据，
          // ||"[]"如果获取不到转换为空的数组
          list: JSON.parse(localStorage.getItem("list") || "[]"),
          //临时要添加的数据
          temp: "",
          //修改框的临时数据
          tempEdit: "",
        };
      },
      methods: {
        //添加
        addItem() {
          // 如果文本问空，就返回
          if (this.temp == "") {
            return;
          }
          // unshfit 添加到最前面
          this.list.unshift({ name: this.temp, done: false, state: 0 });
          // 清空临时框
          this.temp = "";
        },
        // 删除
        removeItem(item) {
          // 弹出确认框
          let flag = window.confirm("你确定要删除吗？");
          // 执行删除
          if (flag) {
            // 查找符合条件元素的索引值
            let ind = this.list.indexOf(item);
            // splice从第ind删除1个
            this.list.splice(ind, 1);
          }
        },
      },
      computed: {
        //通过计算把现有的list数据计算出，以完成的和未完成的两条数据
        undoList() {
          // filter 数组的过滤函数，如果返回的结果为真，则当前遍历的数据保留
          // 否则就会被过滤掉
          return this.list.filter((item) => !item.done);
        },
        doneList() {
          return this.list.filter((item) => item.done);
        },
      },
      // 实现本地储存功能
      // 1.当数据list发生变化时候存
      // 2.当vue创建完毕的时候取
      watch: {
        list: {
          handler(nval) {
            // setItem 设置本地数据
            // JSON.stringify把js对象转换为json字符串
            // JSON.prase 把字符串转换为js对象
            localStorage.setItem("list", JSON.stringify(this.list));
          },
          deep: true,
        },
      },
    });
  </script>

页面效果：

 本地数据：

 

本次所实现的功能是借助Vue框架实现的，相应的功能都加上注释了。这个案例可以综合了很多以前学过的知识，是一个很值得做的一个案例，可以检测一下自己学习的知识怎么样，有没有掌握住，觉得有用的话，点个赞吧！！！