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 = ''
}
清空按钮
实现 <p @click="clear"><a href="#" class="button button-round">清空a>p>
methods: {
// 清空
clear() {
this.all = []
}
}
代办事项数量
的实现已完成事项数量
的实现类似 <div class="content-block-title">代办事项 <span class="numTodo">{{todo.length}}span>div>
代办事项
的实现已完成事项
的实现与之一样,只是将数据来源换成done
数组 <div class="card-content">
<div class="card-content-inner">{{item.title}}div>
<div class="btn">
<p><a href="#" class="button button-success icon icon-check" :class="{select:item.isFinish}"
@click="Check(item.id,item.isFinish)">a>p>
<p><a href="#" class="button button-danger icon icon-remove" @click="Remove(item.id)">a>
p>
div>
div>
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
}
}
弹出框
的实现 <div class="device-content" v-if="isShow" @click="isShow=false">
<div class="modal modal-in" style="display: block; margin-top: -72px;">
<div class="modal-inner">
<div class="modal-text">确定要删除此项吗?div>
div>
<div class="modal-buttons ">
<span class="modal-button modal-button-bold" @click="Removedo(id)">确定span>
div>
div>
<div class="modal-overlay modal-overlay-visible">div>
div>
methods: {
//点击弹出框确定删除
Removedo(id) {
this.all = this.all.filter(item => item.id != id)
}
}
<div class="todo" v-show="isTodo">
div>
<div class="todo" v-show="isDone">
div>
<nav class="bar bar-tab">
<a class="tab-item external" href="#" v-for="item in nav" :class="item.class3" @click="Color(item.id)">
<span :class="[item.class1,item.class2]">span>
<span class="tab-label">{{item.title}}span>
a>
nav>
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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<style>
[v-cloak] {
display: none;
}
/* 按钮样式 */
.btn {
display: flex;
justify-content: flex-end;
margin-top: 10px;
}
.btn p {
margin: 5px 5px;
}
#app .select {
background: rgb(10, 94, 10);
}
/* 标题样式 */
.content-block-title {
font-weight: bold;
}
/* 显示数量样式 */
.numTodo {
color: skyblue;
float: right;
font-weight: 900;
}
.numdo {
color: rgb(255, 136, 156);
float: right;
font-weight: 900;
}
#app .clear {
margin: 0;
}
/* 切换不同页面的样式 */
#app .color {
color: skyblue;
}
style>
<link rel="stylesheet" href="./sui-mobile/dist/css/sm.min.css">
<link rel="stylesheet" href="./sui-mobile/dist/css/sm-extend.min.css">
<body>
<div id="app" v-cloak>
<header class="bar bar-nav">
<a class="icon icon-left pull-left">a>
<a class="icon icon-refresh pull-right">a>
<h1 class="title">ToDolisth1>
header>
<div class="bar bar-header-secondary">
<div class="searchbar">
<div class="search-input">
<input type="search" id='search' placeholder='输入代办事项...' @keyup.enter='add' v-model="msg" />
div>
div>
div>
<div class="content">
<div class="content-block clear">
<p @click="clear"><a href="#" class="button button-round">清空a>p>
div>
<div class="todo" v-show="isTodo">
<div class="content-block-title">代办事项 <span class="numTodo">{{todo.length}}span>div>
<div class="card" v-for="item in todo">
<div class="card-content">
<div class="card-content-inner">{{item.title}}div>
<div class="btn">
<p><a href="#" class="button button-success icon icon-check" :class="{select:item.isFinish}"
@click="Check(item.id,item.isFinish)">a>p>
<p><a href="#" class="button button-danger icon icon-remove" @click="Remove(item.id)">a>
p>
div>
div>
div>
div>
<div class="done" v-show="isDone">
<div class="content-block-title">已完成 <span class="numdo">{{done.length}}span>div>
<div class="card " v-for="item in done">
<div class="card-content">
<div class="card-content-inner">{{item.title}}div>
<div class="btn">
<p><a href="#" class="button button-success icon icon-check"
:class="{'select':item.isFinish}" @click="Check(item.id,item.isFinish)">a>p>
<p><a href="#" class="button button-danger icon icon-remove" @click="Remove(item.id)">a>
p>
div>
div>
div>
div>
div>
<div class="device-content" v-if="isShow" @click="isShow=false">
<div class="modal modal-in" style="display: block; margin-top: -72px;">
<div class="modal-inner">
<div class="modal-text">确定要删除此项吗?div>
div>
<div class="modal-buttons ">
<span class="modal-button modal-button-bold" @click="Removedo(id)">确定span>
div>
div>
<div class="modal-overlay modal-overlay-visible">div>
div>
<nav class="bar bar-tab">
<a class="tab-item external" href="#" v-for="item in nav" :class="item.class3" @click="Color(item.id)">
<span :class="[item.class1,item.class2]">span>
<span class="tab-label">{{item.title}}span>
a>
nav>
div>
<script src="./base/vue.js">script>
<script src="./todo.js">script>
body>
html>
let doJson = localStorage.getItem('todolist')
let arrDo = null
if (doJson) {
arrDo = JSON.parse(doJson)
} else {
arrDo = []
}
new Vue({
el: "#app",
data: {
//所有数据存到all数组中
all: arrDo,
//切换页面数据
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: "已完成" },
],
//切换页面后按钮样式改变
isColor: false,
//代办事项
todo: [],
// 已完成
done: [],
//弹出框是否显示
isShow: false,
//待办事项 已完成事项 是否显示
isTodo: true,
isDone: true,
//输入框双向绑定
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: {
// 输入代办事项
add() {
if (!this.msg) {
return
}
this.all.push({
//利用时间戳来作为id 不会重复
id: new Date,
//输入框内容 利用 v-model
title: this.msg,
//确定完成按钮的状态
isFinish: false
})
//输入完成后清空 输入框内容
this.msg = ''
},
// 清空
clear() {
this.all = []
},
//改变事件状态 待办事项<=>已完成
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
},
//点击弹出框确定删除
Removedo(id) {
this.all = this.all.filter(item => item.id != id)
},
//点击页面切换按钮样式改变 并切换不同页面
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;
}
},
}
})