待办事项是什么意思?
待办事项:在未来一段时间内需要去做的。并且现在还未完成的事情。
“待办事项”常用语题型某人还需要完成哪些事项,“待办”的意思是等待办理,“待办事项”意思是等待办理的事项,主要作用是提醒,常用在人们的日程生活中、学习和工作中。
待办事项数据存储结构:
利用数组结构来保存所有待办事项.
每一项待办事项使用对象结构来保存,
该对象的属性: 内容(title), 完成状态(checked), 编号(id)
添加新待办事项:
在文本框中输入新待办事项内容
点击回车实现数据添加的逻辑
在添加的逻辑中,需要获得到文本框中的输入值
将文本框中输入的待办事项内容转换为一项待办事项对象数据
然后添加到所有待办事项数组中保存
css样式:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
background-color: rgb(212, 212, 214);
}
#header {
height: 50px;
background: #000;
}
#header .contenner {
display: flex;
justify-content: space-between;
align-items: center;
}
.contenner {
width: 800px;
height: 100%;
margin: 0 auto;
/* background-color: aquamarine; */
}
#header .left {
color: white;
font-size: 20px;
}
#header .right input {
width: 200px;
height: 25px;
text-indent: 10px;
}
#main .afoot,
#main .completed {
width: 100%;
}
#main .afoot .top,
#main .completed .top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
#main .afoot .top span,
#main .completed .top span {
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 20px;
}
#main .completed {
margin-top: 30px;
}
ul,
li {
list-style: none;
}
#main li {
height: 30px;
background-color: white;
padding: 4px 0;
border: 1px solid rgb(212, 212, 214);
display: flex;
justify-content: space-between;
}
#main li input {
width: 25px;
height: 25px;
margin-top: 3px;
margin-left: 20px;
}
#main li>:nth-child(1) div {
/* display: inline-block; */
line-height: 30px;
margin-left: 10px;
}
#main li>:nth-child(1) {
display: flex;
}
#main li button {
margin-right: 20px;
}
#footer {
margin-top: 50px;
text-align: center;
}
html代码:
<div id="app">
<!-- 头部 -->
<div id="header">
<div class="contenner">
<div class="left">ToDoList</div>
<div class="right">
<input type="text" placeholder="添加ToDo" v-model.trim="addToDo" @keydown.enter="increase">
</div>
</div>
</div>
<!-- 主体 -->
<div id="main">
<div class="contenner">
<div class="afoot">
<div class="top">
<h2>正在进行</h2>
<span>{{have.length}}</span>
</div>
<ul v-if="have.length != 0">
<li v-for="item,i in have" :key="item.id">
<div>
<input type="checkbox" v-model="item.checked" @click="change(item,i,have)">
<div>{{item.title}}</div>
</div>
<button type="button" @click="remove(have,i)">
删除
</button>
</li>
</ul>
</div>
<div class="completed">
<div class="top">
<h2>已经完成</h2>
<span>{{complete.length}}</span>
</div>
</div>
<ul v-if="complete.length != 0">
<li v-for="item,i in complete" :key="item.id">
<div>
<input type="checkbox" v-model="item.checked" @click="change(item,i,complete)">
<div>{{item.title}}</div>
</div>
<button type="button" @click="remove(complete,i)">
删除
</button>
</li>
</ul>
</div>
</div>
<div id="footer">
<a href="/" @click.prevent="have=[];complete=[]">全部清空</a>
</div>
</div>
vue代码:
Vue.createApp({
data() {
return {
have: [],
complete: [],
addToDo: '',
}
},
methods: {
// 添加数据
increase() {
let arr = this.have.filter(it => it.title == this.addToDo)
if (this.addToDo == "" || arr.length != 0) {
return
}
this.have.push({
id: this.have.length + 1,
checked: false,
title: this.addToDo
})
this.addToDo = ""
},
// 删除
remove(arr, i) {
arr.splice(i, 1)
},
// 改变状态
change(it, i, arr) {
it.checked = !it.checked
let a
switch (arr) {
case this.have:
a = this.complete
break;
case this.complete:
a = this.have
break;
}
a.push(it)
arr.splice(i, 1)
},
}
}).mount("#app")
运行结果:
可以对数据进行增删查改等一系列操作