效果概述

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

具体效果

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

实现后效果图

具体代码思路

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

HTML 结构

编辑操作（双击每条信息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 具体效果的代码思路，不懂得也可以在评论区里问我，以后会持续发布一些新的功能，敬请关注。
Vue - Todos 案例