效果概述

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

具体效果

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

实现后效果图

todos 具体效果

具体代码思路

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

HTML 结构

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

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

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

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

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

显示未完成的数量

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

不同按钮渲染不同数据

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

<div class="box"><ul class="center"><li>todos</li><li><inputtype="text"v-model="text"placeholder="What needs to be done?"@keyup.enter="submit"/><span class="bottom" @click="AllChecked" v-show="Down">❯</span></li><liv-for="(item, index) in list":key="index"@mouseover="mouseOver(item)"@mouseleave="mouseLeave(item)"><inputtype="text"v-model="item.title":disabled="item.disabled":readonly="item.readonly"@dblclick="dbTest(index)"@keyup.enter="readonly(index)"/><inputtype="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><spanv-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 = 0if(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 = !datastate.list[i].disabled = !data}state.all = !datalocalStorage.setItem('lists',JSON.stringify(state.list))this.commit('refresh')},// 单选radio(state,data){state.list[data].checkbox = !state.list[data].checkboxlet 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 = listdlocalStorage.setItem('lists',JSON.stringify(state.list))}else{let lists = JSON.parse(localStorage.getItem("listd"))let listd = lists.filter((item) => {return !item.checkbox;});state.list = listdlocalStorage.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 = listdlocalStorage.setItem('lists',JSON.stringify(state.list))}else{let lists = JSON.parse(localStorage.getItem("listd"))let listd = lists.filter((item) => {return item.checkbox;});state.list = listdlocalStorage.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 = falselocalStorage.removeItem('listd')localStorage.setItem('lists',JSON.stringify(state.list))},// 回车取消修改readonly(state,data){state.list[data].readonly = truelocalStorage.setItem('lists',JSON.stringify(state.list))}},actions: {},modules: {}
})

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

Vue - Todos 案例相关推荐

【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
一、express 路由 todos案例
一.express路由动态路由参数 params 路径参数 query 二. todos案例 2.1 准备工作新建一个文件夹01-demo 执行npm init -y 生成package.json ...
组件化拆分（三）-Todos案例——单页面-详细代码
Todos案例-单页面-详细代码 src/views/Todos.js /*Todos的模板 */ import React from 'react' import 'todomvc-common/b ...
Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)
Vue基础案例(水果搜索,购物车,todolist,留言板,跑马灯) 01.水果搜索案例思路以及运用知识点通过computed计算 keyword与list ,算出findlist 如果list中 ...
前端vue入手案例--记事本
分享一个用vue做的一个案例,这个案例结合了大多的vue的入门知识,包括有点击事件,数据双向绑定,v-for获取数据列表,v-if 页面元素显示方法等等. 学习这个案例也是能很好的帮助vue的学习者掌 ...
vue实战案例：用学过的知识做一个小demo
学过了前面11个章节的知识,可以说你已经对vue2.0的基础知识有了一定程度的掌握,虽然在真正开发过程中,一些知识的使用会稍有不同,但是别慌,我们会把那部分内容在进阶系列,比如:单文件组件,过渡效果, ...

Vue - Todos 案例

目录