Vue案例之实现ToDolist

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所有数据的变化,数据一旦发生改变todo done数组中的数据也发生改变

• 数据改变之后将数据存储到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: {

//要添加的函数

}

})

• 输入框实现

<input type=“search” id=‘search’ placeholder=‘输入代办事项…’ @keyup.enter=‘add’ v-model=“msg” />

methods: {

// 输入代办事项

add() {

this.all.push({

//利用时间戳来作为id 不会重复

id: new Date,

//输入框内容 利用 v-model

title: this.msg,

//确定完成按钮的状态

isFinish: false

})

//输入完成后清空 输入框内容

this.msg = ‘’

}

• 清空按钮实现

methods: {

// 清空

clear() {

this.all = []

}

}

• 代办事项数量的实现

• 已完成事项数量的实现类似

代办事项 {{todo.length}}

• 代办事项的实现

• 已完成事项的实现与之一样,只是将数据来源换成done数组

{{item.title}}

@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

}

}

• 弹出框的实现

确定要删除此项吗?

<span class=“modal-button modal-button-bold” @click=“Removedo(id)”>确定

methods: {

//点击弹出框确定删除

Removedo(id) {

this.all = this.all.filter(item => item.id != id)

}

}

• 切换不同页面的实现

• 点击不同的按钮时控制,待办事项与已完成事项的显示与否

• 并切换按钮颜色

<a class=“tab-item external” href=“#” v-for=“item in nav” :class=“item.class3” @click=“Color(item.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

<input type=“search” id=‘search’ placeholder=‘输入代办事项…’ @keyup.enter=‘add’ v-model=“msg” />

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

/a>

ToDolist

<input type=“search” id=‘search’ placeholder=‘输入代办事项…’ @keyup.enter=‘add’ v-model=“msg” />

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-e8gcH6yr-1714162311240)]
[外链图片转存中…(img-8EQBrFOb-1714162311241)]