本文介绍了如何使用Vue.js构建一个Todo应用，包括用户输入验证、动态计算已完成任务数、双向绑定复选框状态、组件间传值以及删除功能。重点展示了如何在UserHeader和UserFooter组件中使用计算属性和数组操作进行任务管理。
},
UserHeader子组件：
随机生成一个唯一的id
安装: npm i nanoid
导入：import {nanoid} from ‘nanoid’
使用：id: nanoid(）
props: [“addtodo”],
methods: {
add() {
//校验数据
if (!this.title.trim()) {
alert("数据不能为空");
}
//添加一个信息 也可以直接用e.target.value拿到这个输入的值
// 将用户的输入包装成一个todoObj对象
const todoObj = { id: nanoid(), title: this.title, done: false };
//通知App组件去添加一个todo对象 也就是将包装好的todoObj对象传递给App组件
this.addtodo(todoObj);
//清空输入
this.title = " ";
},
},
💗 功能三： 动态计算有几个已完成的任务以及所有的任务
此时需要在UserFooter组件中通过计算属性计算得出已完成的任务
computed: {
doneTotal() {
return this.todos.reduce((pre, todo) => pre + (todo.done ? 1 : 0), 0);
},
},
arry.reduce()方法：
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
返回值分配给累计器，该返回值在数组的每个迭代中被记住，并最后成为最终的单个结果值。
第一个参数：累计器累计回调的返回值; 它是上一次调用回调时返回的累积值
第二个参数：数组中正在处理的元素。
计算所有的任务
方法一：最简单的方法
todos.length
第二种：计算得出
total() {
return this.todos.length;
},
💗 功能四、点击复选框，实现选中或不选中效果（即完成或未完成）双向绑定
借助UserList 组件实现UserItem和App组件之间互相传值
UserItem组件：
UserFooter组件：
isAll: {
get() {
//返回的是布尔值
return this.doneTotal === this.total && this.total > 0;
},
set(value) {
this.checkAlltodo(value);
},
},
App 组件：
methods: {
//勾选或者取消勾选一个todo
checktodo(id) {
this.todos.forEach((todo) => {
if (todo.id === id) {
todo.done = !todo.done;
}
});
},
//全选或不全选todoObj
checkAlltodo(done) {
this.todos.forEach((todo) => {
todo.done = done;
});
},
},
💗 功能五、删除单个任务以及删除已完成任务
App.vue 组件
<UserList
:todos=“todos”
:checktodo=“checktodo”
:deletetodo=“deletetodo”
/>
<UserFooter
:todos=“todos”
:checkAlltodo=“checkAlltodo”
:clearAlltodo=“clearAlltodo”
/>
methods: {
//删除选中的todoObj
deletetodo(id) {
this.todos = this.todos.filter((todo) => {
//将id不等于当前删除的那个id，的todoObj筛选出来重新渲染
return todo.id !== id;
});
},
//删除已完成
clearAlltodo() {
this.todos = this.todos.filter((todo) => {
return !todo.done;
});
},
},
UserItem.vue组件 - 删除单个任务
<button class=“btn btn-danger” @click=“handleDelete(todo.id)”>删除
1185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
