vue todo list,vue3 todolist
这篇文章主要为大家介绍了某视频剪辑软件之任务列表的案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助溴
模板
div id=root
div class=todo-container
div class=todo-wrap
Top :received=received /
list:todos= todos :check todo= check todo :delete todo= delete todo /
bottom:todos= todos :check all todo= check all todo :clear all todo= clear all todo /
/div
/div
/div
/模板
脚本
从导入顶部 components/Top.vue
从导入底部/components/Bottom.vue
从导入列表 components/List.vue
导出默认值{
名称："应用程序",
组件：{
顶，
列表，
底部
},
data() {
返回{
todos: [{
id:“001”，
标题： 吃饭，
完成：正确
},
{
id:“002”，
标题： 睡觉，
完成：错误
},
{
id:“003”，
标题： 打豆豆，
完成：错误
},
]
}
},
方法：{
//添加一个待办事项
已接收(todoObj) {
这个。托多斯。un shift(todoObj)；
},
//取消勾选待办事项
checkTodo(id) {
this.todos.forEach((todo)={
//函数体
if (todo.id===id) todo.done=！todo.done
})
},
//删除
deleteTodo(id) {
这个。todos=这个。托多斯。filter(todo=todo。id！==id)
},
//全选全不选
checkAllTodo(完成){
this.todos.forEach((todo)={
todo.done=done
})
},
//清除所有已经完成的数据
clearAllTodo() {
这个。todos=这个。托多斯。过滤器((todo)={
回归！todo.done
})
}
}
}
/脚本
style lang=css
/*base*/
正文{
背景：# fff
}。btn {
显示：内嵌-块；
填充：4px 12px
边距-底部：0;
字体大小：14px
行高：20px
文本对齐：居中；
垂直对齐：居中；
光标：指针；
box-shadow: inset 0 1px 0 rgba(255，255，255，0.2)，0 1px 2px rgba(0，0，0，0.05)；
边框-半径：4px
}。BTN-危险{
颜色：# fff
背景色：# da4f49
边框：1px纯色# bd362f
}。BTN-危险：悬停{
颜色：# fff
背景色：# bd362f
}。btn:焦点{
大纲：无；
}。待办事项-容器{
宽度：600像素
边距：0自动；
}。待办事项-容器todo-wrap {
填充：10px
边框：1px固体# ddd
边框半径：5px
}
/风格
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。