Vue案例之实现ToDolist，web网页开发
文章目录
-
-
- 本案例用到了SUI库搭建布局页面,点击进入官网查看使用教程并下载文件使用,也可以自己完成页面布局
-
-
实现效果
-
核心思想
-
程序代码
本案例用到了SUI库搭建布局页面,点击进入官网查看使用教程并下载文件使用,也可以自己完成页面布局
实现效果
===============================================================
1.按回车键输入内容,并清空输入框
2.将输入框中内容添加到代办事项中
3.点击切换按钮,可以改变事件状态,待办事项<==>已完成
4.记录代办事项和已完成事项的数量值
5.点击删除,弹出弹框,点击确定删除,点击空白取消弹框
6.点击清空删除所有内容
7.将数据存储到本地,刷新或者重新打开页面后数据不消失.利用localstorage
8.点击底部切换按钮,切换不同页面
核心思想
===============================================================
-
先判断
localstorage中是否有之前存储的内容 -
如果有就得到这个数据,没有就设置初始为空数组
let doJson = localStorage.getItem(‘todolist’)
let arrDo = null
if (doJson) {
arrDo = JSON.parse(doJson)
} else {
arrDo = []
}
-
all数组存储所有数据,todo代办事项数组,done已完成事项数组, -
监听
all所有数据的变化,数据一旦发生改变tododone数组中的数据也发生改变 -
数据改变之后将数据存储到
localstorage中
new Vue({
el: “#app”,
data: {
//所有数据存到all数组中
all: arrDo,
//代办事项
todo:[],
// 已完成
done:[],
isShow: false,
msg: “”,
},
watch: { //监听 all 数组变化
all:{
immediate:true,
handler(){
// all 数组一旦变化 todo done 数组内容也改变
this.todo=this.all.filter(item=>item.isFinish!=true)
this.done=this.all.filter(item=>item.isFinish!=false)
localStorage.setItem(‘todolist’,JSON.stringify(this.all))
}
},
},
methods: {
//要添加的函数
}
})
输入框实现
methods: {
// 输入代办事项
add() {
this.all.push({
//利用时间戳来作为id 不会重复
id: new Date,
//输入框内容 利用 v-model
title: this.msg,
//确定完成按钮的状态
isFinish: false
})
//输入完成后清空 输入框内容
this.msg = ‘’
}
清空按钮实现
methods: {
// 清空
clear() {
this.all = []
}
}
-
代办事项数量的实现 -
已完成事项数量的实现类似
-
代办事项的实现 -
已完成事项的实现与之一样,只是将数据来源换成done数组
@click=“Check(item.id,item.isFinish)”>
methods: {
//改变事件状态 待办事项<=>已完成
Check(id, isFinish) {
this.all = this.all.filter(item => {
if (item.id === id) {
item.isFinish = !isFinish
}
return true
})
},
// 点击删除按钮 然后显示弹出框
Remove(id) {
this.id = id
this.isShow = true
}
}
弹出框的实现
methods: {
//点击弹出框确定删除
Removedo(id) {
this.all = this.all.filter(item => item.id != id)
}
}
-
切换不同页面的实现
-
点击不同的按钮时控制,待办事项与已完成事项的显示与否
-
并切换按钮颜色
{{item.title}}
new Vue({
el: “#app”,
data: {
//切换页面数据
nav: [
{ id: 1, class1: “icon”, class2: “icon-home”, class3: “color”, title: “首页” },
{ id: 2, class1: “icon”, class2: “icon-edit”, title: “未完成” },
{ id: 3, class1: “icon”, class2: “icon-emoji”, title: “已完成” },
],
//待办事项 已完成事项 是否显示
isTodo: true,
isDone: true,
},
methods: {
Color(id) {
//点击按钮样式改变
this.nav = this.nav.filter(item => {
if (item.id === id) {
item.class3 = “color”
return true
} else {
item.class3 = “”
return true
}
})
//点击按钮切换页面
switch (id) {
case 1: this.isTodo = true, this.isDone = true
break;
case 2: this.isTodo = true, this.isDone = false
break;
case 3: this.isTodo = false, this.isDone = true
break;
}
},
}
})
程序代码
===============================================================
- html代码
ToDolist
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！
想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-9ddbWZeK-1712228374890)]
[外链图片转存中…(img-BZmHaEx7-1712228374891)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
[外链图片转存中…(img-DoUWMhJE-1712228374891)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！
[外链图片转存中…(img-VPKojkYa-1712228374891)]
[外链图片转存中…(img-72q1c008-1712228374891)]