简易任务清单

简易任务清单

科技前沿 • 2025-03-24 10:07 • 阅读 29

大家好，我是讯享网，很高兴认识大家。

简单任务清单（TodoList）

1、功能介绍

分三部分：头部添加事项；内容区域显示事项并操作事项；尾部统计事项完成情况以及处理事项功能

讯享网

2、功能展示

动态展示
讯享网

3、功能亮点

（1）computed计算属性

讯享网 computed: { 
    //计算已勾选事项数量 completeSize() { 
    return this.todo.reduce((preTotal, item) => preTotal + (item.complete ? 1 : 0), 0) }, //是否全选 isAllSelected: { 
    get() { 
    return this.todo.length === this.completeSize && this.todo.length }, //点击全选则所有事项都被勾选的事件 set(check) { 
    this.selectAllItems(check) } } }

（2）获取浏览器数据库数据并实时保存，判断localStorege中所取数据为空时，就取空数组字符串形式，因为外部有json格式的转化

 data() { 
    return { 
    //事项列表从浏览器数据库中获取 todoList: JSON.parse(window.localStorage.getItem("todo_ist") || '[]') } },

(3) 实时保存数据到浏览器中（以json格式保存数据）

讯享网 watch:{ 
    todoList: { 
    deep: true, handler(newVal) { 
    window.localStorage.setItem("todo_ist", JSON.stringify(newVal)) } }

（4）数组方法的使用

reduce 定义和用法
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

参数解释
total：必需；计算结束后的返回值
currentValue: 必需；当前元素
currentIndex: 可选；当前元素的索引
arr: 可选；当前元素所属的数组对象

举例
preTotal即为最终要计算出的数值，当数组内每个对象的complete为true时，preTotal加1，最终计算得出整个事项列表中已完成的数量

讯享网completeSize() { 
    return this.todo.reduce((preTotal, item) => preTotal + (item.complete ? 1 : 0), 0) },

4、源代码

https://github.com/Demo996/TodoList.git

5、总结

项目虽小，但是整体写下来还是有收获的，例如pros传数据的写法从简到复杂可有有三四种；props可以传Function类型；以及数组函数的使用；计算属性的理解。不积跬步无以至千里，不积小流无以成江海。不断总结才能真正进步。