Vue案例之实现ToDolist

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)”>

已完成 {{done.length}}

{{item.title}}

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

end -->

已完成 {{done.length}}

{{item.title}}

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-RJrl0YVA-1720106450374)]

[外链图片转存中…(img-oatWQb3i-1720106450375)]