2024年最新Vue案例之实现ToDolist，京东面试题及答案

最后

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

❤️ 谢谢支持，喜欢的话别忘了 关注、点赞哦。

}

• 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” />

代办事项 {{todo.length}}

{{item.title}}

@click=“Check(item.id,item.isFinish)”>

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

}}

@click=“Check(item.id,item.isFinish)”>

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

[外链图片转存中…(img-K1vRcYo4-1715713186039)]