效果概述

回车添加，删除，选中则禁用，过滤

具体效果

按回车键添加一层数据
按下拉箭头全部选中，全不选
选中则禁用
过滤全部，选中，未选中
全部删除
单个删除
双击改变名称

实现后效果图

具体代码思路

给 input 框绑定回车事件，回车后把数据请求到 vuex 中
把数据保存至本地存储中
给下拉箭头绑定点击事件，点击则给所有多选框进行反选
判断是否选中，如果选中则禁用
给数组进行过滤，然后渲染至页面中
双击 input 框 则允许改变样式，平时则禁止改变

HTML 结构

准备模拟数据，将数据添加到页面中，使用v-for;使用v-model实现数据的双向绑定
实现添加功能（在文本框输入，按回车添加数据）

编辑操作（双击每条信息todo，进行编辑）

1. 双击todo时，给该条数据添加类editing,使得其进入编辑状态，并聚焦focus
2. 编辑完成使用enter，改变该条数据
3. 使用enter，退出编辑
4. 失去焦点时退出编辑blur

删除（点击叉号时删除该条数据）

1. 绑定一个点击事件
2. 使用filter对todos进行操作

显示未完成的数量

1. 计算出剩余未完成的数量
2. 使用computed侦听属性，当checkbox变换时，进行侦听

不同按钮渲染不同数据

1. 当点击按钮时，路由切换（改变路由）
2. 点击All显示全部，点击Active显示已经完成的,Completed显示未完成的
3. 如果绑定点击事件会比较麻烦，使用watch监听则刚进来时获取不到任何东西，所以只能使用计算属性（侦听的是自己的数据）

<div class="box">
  <ul class="center">
    <li>todos</li>
    <li>
      <input
        type="text"
        v-model="text"
        placeholder="What needs to be done?"
        @keyup.enter="submit"
      />
      <span class="bottom" @click="AllChecked" v-show="Down">❯</span>
    </li>
    <li
      v-for="(item, index) in list"
      :key="index"
      @mouseover="mouseOver(item)"
      @mouseleave="mouseLeave(item)"
    >
      <input
        type="text"
        v-model="item.title"
        :disabled="item.disabled"
        :readonly="item.readonly"
        @dblclick="dbTest(index)"
        @keyup.enter="readonly(index)"
      />
      <input
        type="checkbox"
        class="ckbox"
        v-model="item.checkbox"
        @click="radio(index)"
      />
      <button class="delete" v-show="item.delete" @click="Delete(index)">
        ×
      </button>
    </li>
    <li v-show="Down">
      <span> {
   { id }} items left</span>
      <span
        v-for="(item, index) in tabs"
        :key="index"
        @click="Inquire(index)"
        :style="{ color: item.color }"
      >
        {
   { item.title }}
      </span>
      <button @click="Clear">Clear completed</button>
    </li>
  </ul>
</div>

CSS 样式

css 样式使用 scss

.box {
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  .center {
    width: 550px;
    margin: 0 auto;
    li {
      width: 100%;
      height: 65px;
      list-style: none;
      position: relative;
      input {
        width: 100%;
        height: 65px;
        border: none;
        padding: 20px 0px 20px 50px;
        border-bottom: 1px solid #ededed;
        outline: none;
      }
      button {
        background-color: rgba($color: #000000, $alpha: 0);
        border: none;
        color: #cc9a9a;
        font-size: 28px;
        margin-top: -8px;
      }
      .bottom {
        position: absolute;
        top: 18px;
        left: 15px;
        color: gainsboro;
        font-size: 25px;
        transform: rotate(90deg);
      }
      .ckbox {
        width: 20px;
        height: 20px;
        border-radius: 100%;
        position: absolute;
        top: 25px;
        left: 15px;
      }
      .delete {
        position: absolute;
        top: 25px;
        right: 15px;
      }
    }
    li:last-child {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        background-color: rgba($color: #000000, $alpha: 0);
        border: none;
        color: #000;
        font-size: 16px;
        margin: 0;
      }
    }
    li:first-child {
      height: 80px;
      text-align: center;
      line-height: 80px;
      font-size: 50px;
      color: rgba(175, 47, 47, 0.15);
    }
    li:nth-of-type(2) {
      input {
        // color: #e6e6e6;
        font-size: 25px;
      }
    }
  }
}

JS 实现效果

import { mapState } from "vuex";
export default {
  data() {
    return {
      text: "",
    };
  },
  computed: {
    ...mapState(["list", "id", "all", "Down", "tabs"]),
  },
  mounted() {
    this.$store.commit("refresh");
  },
  methods: {
    // 提交
    submit() {
      if (this.text == "") {
        alert("不能为空");
      } else {
        this.$store.commit("list", {
          checkbox: false,
          title: this.text,
          delete: false,
          disabled: false,
          readonly: true,
        });
        this.text = "";
      }
    },
    // 鼠标移入
    mouseOver(item) {
      item.delete = true;
    },
    // 鼠标移出
    mouseLeave(item) {
      item.delete = false;
      item.readonly = true;
      localStorage.setItem("lists", JSON.stringify(this.list));
    },
    // 删除
    Delete(i) {
      this.$store.commit("Delete", i);
    },
    // 全部删除
    Clear() {
      this.$store.commit("clear");
    },
    // 全选
    AllChecked() {
      this.$store.commit("AllChecked", this.all);
    },
    // 单选
    radio(i) {
      this.$store.commit("radio", i);
    },
    // 查询
    Inquire(index) {
      if (index == 0) {
        this.$store.commit("All");
      } else if (index == 1) {
        this.$store.commit("Active");
      } else {
        this.$store.commit("Completed");
      }
    },
    // 双击修改
    dbTest(index) {
      this.$store.commit("dbTest", index);
    },
    // 回车取消修改
    readonly(index) {
      this.$store.commit("readonly", index);
    },
  },
};

vuex 具体代码

使用Vuex：
如果不是大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，您最好不要使用 Vuex。这里我们是用来学习，所以使用一下vuex试试

import { createStore } from 'vuex'

export default createStore({
  state: {
    list:JSON.parse(localStorage.getItem("lists")) || [],
    id:'',
    all:false,
    Down: true,
    tabs: JSON.parse(localStorage.getItem("tab")) ||
    [
      { title: "All", tab: "all", color: "red" },
      { title: "Active", tab: true, color: "black" },
      { title: "Completed", tab: false, color: "black" },
    ],
  },
  getters: {
  }, 
  mutations: {
    // 页面刷新时
    refresh(state){
      let arr1 = state.list.filter((item) => {
        return !item.checkbox;
      });    
      state.id = arr1.length    
      if(state.list == ""){
        state.Down = false
      }else{
        state.Down = true
      }
      let arr = state.list.filter((item) => {
        return item.checkbox ;
      });
      if(arr.length == state.list.length){
        state.all = true
      }else{
        state.all = false
      }
    },
    // 添加
    list(state,data){
      state.list.push(data)
      localStorage.setItem('lists',JSON.stringify(state.list))
      localStorage.removeItem('listd')
      this.commit('refresh')
    },
    // 删除
    Delete(state,data){
      state.list.splice(data,1)
      localStorage.setItem('lists',JSON.stringify(state.list))
      localStorage.removeItem('listd')

      this.commit('refresh')
    },
    // 全部删除
    clear(state){
      state.list = ''
      // localStorage.setItem('lists',JSON.stringify(state.list))
      localStorage.removeItem('lists')
      localStorage.removeItem('listd')
      
      state.id = 0
      if(state.list == ""){
        state.Down = false
      }else{
        state.Down = true
      }
    },
    // 全选
    AllChecked(state,data){
      console.log(!data);
      for(let i in state.list){
        // console.log(state.list[i].checkbox = !data);
        state.list[i].checkbox = !data
        state.list[i].disabled = !data
      }
      state.all = !data
      localStorage.setItem('lists',JSON.stringify(state.list))

      this.commit('refresh')
    },
    // 单选
    radio(state,data){
      state.list[data].checkbox = !state.list[data].checkbox
      
      let arr = state.list.filter((item) => {
        return item.checkbox ,item.disabled = item.checkbox;
      });
      if(arr.length == state.list.length){
        state.all = true
      }else{
        state.all = false
      }
      localStorage.setItem('lists',JSON.stringify(state.list))

      this.commit('refresh')
    },
    // 查询全部
    All(state){
      if(JSON.parse(localStorage.getItem("listd")) === null){
        state.list = JSON.parse(localStorage.getItem("lists"))
        localStorage.setItem('lists',JSON.stringify(state.list))
      }else{
        state.list = JSON.parse(localStorage.getItem("listd"))
        localStorage.removeItem('listd')
        localStorage.setItem('lists',JSON.stringify(state.list))
      }

      for (let i in state.tabs) {
        state.tabs[i].color = "black"
      }
      state.tabs[0].color = "red"
      localStorage.setItem('tab',JSON.stringify(state.tabs))

      this.commit('refresh')
    },
    // 查询未选中
    Active(state){
      if(JSON.parse(localStorage.getItem("listd")) === null){
        let listd = state.list.filter((item) => {
          return !item.checkbox;
        });
        localStorage.setItem('listd',JSON.stringify(state.list))
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }else{
        let lists = JSON.parse(localStorage.getItem("listd"))
        let listd = lists.filter((item) => {
          return !item.checkbox;
        });
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }
      for (let i in state.tabs) {
        state.tabs[i].color = "black"
      }
      state.tabs[1].color = "red"
      localStorage.setItem('tab',JSON.stringify(state.tabs))
    },
    // 查询选中
    Completed(state){
      console.log(JSON.parse(localStorage.getItem("listd")) === null);
      if(JSON.parse(localStorage.getItem("listd")) === null){
        let listd = state.list.filter((item) => {
          return item.checkbox;
        });
        localStorage.setItem('listd',JSON.stringify(state.list))
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }else{
        let lists = JSON.parse(localStorage.getItem("listd"))
        let listd = lists.filter((item) => {
          return item.checkbox;
        });
        state.list = listd
        localStorage.setItem('lists',JSON.stringify(state.list))
      }
      for (let i in state.tabs) {
        state.tabs[i].color = "black"
      }
      state.tabs[2].color = "red"
      localStorage.setItem('tab',JSON.stringify(state.tabs))
    },
    // 双击修改
    dbTest(state,data){
      state.list[data].readonly = false
      localStorage.removeItem('listd')
      localStorage.setItem('lists',JSON.stringify(state.list))
    },
    // 回车取消修改
    readonly(state,data){
      state.list[data].readonly = true
      localStorage.setItem('lists',JSON.stringify(state.list))
    }
  },
  actions: {
  },
  modules: {
  }
})

---

以上就是 vue 中实现 todos 具体效果的代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog