-
todolist案例——vue脚手架（2）
接上回继续
目录
一、列表状态框
在item子组件里绑定一个changedone用来获取列表复选框状态
- v-model="changedone" />{{item.name}}
用计算属性获得状态框done的值
computed:{
changedone:{
get(){
// return true;
return this.item.done;
},
}
在get( ) 测试return true 时，结果是复选框全选；return false时，复选框全不选
get( ）输入 return this.item.done，获取列表done的值，显示复选框状态
既然已经在页面中显示了复选框状态，那接下来就是改变复选框状态了。可以通过set( ）函数来改变复选框状态
get(){
// return true;
return this.item.done;
},
set(done){
console.log(done); //测试是否改变了done值
}
在能改变done的值后，把值传递到复选框
App.vue中，方法里添加
- :editDone="editDone">
//修改状态
editDone(id){
this.todo.forEach((item)=>{
if(item.id==id){
item.done = !item.done;
}
})
},
list.vue中
- :editDone='editDone'>
props:['todo','delTodo','editDone'],
item.vue中
props:['item','delTodo','editDone'],
computed:{
changedone:{
//得到的值调用
get(){
// return true;改变状态
return this.item.done;
},
//设置值的时候调用
set(done){
// console.log(done);
this.editDone(this.item.id);
}
}
}
二、已完成任务
该部分主要依据复选框状态选定，已完成数量是复选框状态为true，被勾选的列表项目数之和
app.vue
先传入数组
footer.vue
已完成({{alldone}}
computed:{
alldone(){
return this.todo.reduce((total,current)=>{
return total+(current.done?1:0)
},0);
},
},
三、总任务
总任务可以直接根据列表项目总量而定，列表的数据又是根据传入的数组而来，所以可以直接根据数组长度来获得总任务的数量
computed:{
alldone(){
return this.todo.reduce((total,current)=>{
return total+(current.done?1:0)
},0);
},
alltodo(){
return this.todo.length;
},
},
四、全选全不选
app.vue
绑定复选框状态，复选框全勾选或已完成任务等于所有总任务时，全选框勾选；反之不勾选
//全选/全不选
editAll(checked){
this.todo.forEach((item)=>{
item.done=checked;
})
},
footer.vue
props:['todo','editAll',],
computed:{
checkall(){
return this.alldone!=0 && this.alltodo==this.alldone;
}
},
methods:{
changeAll(e){
this.editAll(e.target.checked); //全选按钮状态
},
}
五、清除所以已完成任务
app.vue
遍历筛选所有done值为true的元素，即已完成任务的所有项，把这些项都清除了
delAll(){
this.todo=this.todo.filter((item)=>{
return item.done!=true;
})
}
footer.vue
props:['todo','editAll','delAll'],
methods:{
pressDelAll(){
this.delAll();
}
}
六、整体效果
下面是完整版todolist案列代码
-
相关阅读:
LainChain输出解析器
定时任务框架
【嵌入式】---- 内存四区介绍
rxjava 工作原理分析 调用链分析
cad图片怎么转换成pdf格式
向量数据库Milvus字符串查询
【Python】eval
docker理解
Android 10 状态栏通知图标和下拉状态栏图标为白色问题
web实现usb扫码枪读取二维码数据功能
- 原文地址：https://blog.csdn.net/qq_53841687/article/details/126502969