用vue制作一个任务清单（todoList）
利用清单进行自我激励，达成一个小目标就划掉一个任务。 #生活常识# #时间管理建议# #任务清单制定#
功能需求：
(1)能显示未完成的任务和已完成的任务.
(2)能添加新的任务。
(3)能修改任务的状态(未完成->已完成)
(4)能删除任务。
(5)能清空所有任务。
效果图：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="todoList.css">
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<title>todoList清单</title>
</head>
<body>
<div id="root" class="container">
<div class="add-todo">
<h1>欢迎使用ToDoS</h1>
<input type="text" v-model="inputstr" @keydown.enter="add" placeholder="按下回车键添加任务" class="new-todo" />
</div>
<h2>正在进行({{nolist}})</h2>
<ul class="todo_item">
<li v-for="(item,index) in list" :key="index" v-show="!item.isdone">
<input type="checkbox" @click.prevent="handleClick(item)" class="checkbox"/>
<span class="content" @dblclick="updateIndex(item,index)" v-show="ifnum!=index">{{item.text}}</span>
<input type="text" v-show="ifnum==index" v-model="item.text" @keydown.enter="complete"
@keydown.esc="cancel(item)" @blur="complete" />
<font color="#999"> {{getdate()}} </font>
<button @click="del(index)" class="del">删除</button>
</li>
</ul>
<h2>已经完成({{yeslist}})</h2>
<ul class="todo_item">
<li v-for="(item,index) in list" :key="index" v-show="item.isdone">
<input type="checkbox" checked @click.prevent="handleyes(item)" @dblclick="updateIndex" />
<span class="content" @dblclick="updateIndex(item,index)" v-show="ifnum!=index">{{item.text}}</span>
<input type="text" v-show="ifnum==index" v-model="item.text" @keydown.enter="complete"
@keydown.esc="cancel(item)" @blur="complete" />
<font color="#999"> {{getdate()}} </font>
<button @click="del(index)" class="del">删除</button>
</li>
<button @click="allDelete" class="allDel">全部删除</button>
</ul>
<p>注：双击todo可修改内容</p>
</div>
</body>
<script>
const { createApp,ref } = Vue
const app = Vue.createApp({
data() {
return {
list: JSON.parse(localStorage.getItem('list'))||[],
inputstr: "",
ifnum: -1,
str: "",
times:'',
};
},
created() {
this.getTimes()
},
props:{
selector: {
type: Number,
required: true,
},
done: {
type: Boolean,
required: true,
},
},
computed: {
yeslist() {
let num = 0;
this.list.map(item => {
if (item.isdone) {
num++;
}
});
return num;
},
nolist() {
let num = 0;
this.list.map(item => {
if (!item.isdone) {
num++;
}
});
return num;
},
},
methods: {
add() {
this.list.push({
text: this.inputstr,
isdone: false,
time: new Date().getTime()
});
this.inputstr = "";
this.save();
},
handleClick(item) {
item.isdone = true;
this.save();
},
handleyes(item) {
item.isdone = false;
this.save();
},
updateIndex(item, index) {
this.str = item.text;
this.ifnum = index;
this.save();
},
complete() {
this.ifnum = -1;
this.save();
},
cancel(item) {
item.text = this.str;
this.str = "";
this.ifnum = -1;
this.save();
},
del(index) {
this.list.splice(index, 1);
this.save();
},
allDelete(){
this.list.splice(0, this.list.length);
this.save();
},
save() {
localStorage.list = JSON.stringify(this.list);
},
getdate() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + " /" + month + " / " + strDate ;
return currentdate;
}
},
created() {
let list = localStorage.list;
if (list) {
this.list = JSON.parse(list);
}
}
})
const vm = app.mount("#root")
</script>
</html>
style样式：
html,
body {
margin: 0;
padding: 0;
}
li,ul{
list-style: none;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: grid;
align-items: center;
justify-items: center;
background: rgb(216, 243, 214);
}
button{
background: linear-gradient(#b6f1a2, #6df86d);
border: none;
border-radius: 10%;
color: #fff;
}
input[type="checkbox"] {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: 2px;
border-radius: 50%;
border: 1px solid #b6f1a2;
}
input[type="checkbox"]:checked {
background: #b6f1a2;
}
.container{
width: 100%;
max-width: 400px;
box-shadow: 0px 0px 24px rgba(26, 25, 25, 0.15);
border-radius: 24px;
padding: 48px 28px;
background-color: rgb(229, 230, 235);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px rgb(229, 230, 235), 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px rgb(229, 230, 235), 0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
h1{
margin: 24px 0;
font-size: 28px;
color: #384280;
width: 100%;
}
h2{
color: #6b729c;
}
.add-todo {
position: relative;
display: flex;
align-items: center;
}
.add-todo input{
padding: 16px 52px 16px 18px;
border-radius: 48px;
border: none;
outline: none;
box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.08);
font-size: 16px;
color: #626262;
}
.add-todo>button {
width: 46px;
height: 46px;
border-radius: 50%;
background: linear-gradient(#b6f1a2, #6df86d);
border: none;
outline: none;
color: white;
position: absolute;
right: 0px;
cursor: pointer;
}
.todo_item>li{
background: white;
padding: 16px;
border-radius: 8px;
color: #626262;
margin-top: 20px;
}
.allDel{
margin-top: 20px;
width: 100px;
height: 40px;
font-size: 18px;
font-weight: bold;
}
网址：用vue制作一个任务清单（todoList） https://www.yuejiaxmz.com/news/view/849822
相关内容
构建React TodoList应用：管理你的任务清单构建React TodoList应用：管理你的任务清单在日常生活和工作中，任务管理是一项至关重要的任务。为了更好地组织和
todolist怎么用？掌握高效任务管理技巧
[工具]ToDoList－简单有效的个人任务管理器
探索 TodoList：一款轻量级、高效的个人任务管理应用
工作任务管理 ToDoList v7.2.20.0 Lite 绿色便携版（最新）
ToDoList中文版(任务管理软件)v7.1.5.0
ToDoList
每日任务清单app推荐
轻松管理日常任务：React实现个性化的待办事项清单
随便看看
最新动态分享
- 双阳台
- 玉屏齐云府丨当景观阳台遇上生活
- 为什么买房要选双阳台？看完你就懂了
- 美观又实用的阳台打造方案，为你的房子锦上添花
- 高颜值阳台改造案例，营造属于你的秘密花园
- 打造“阳台花园” 方寸之间有美景
- 幸福生活，绿意打造阳台
- 把阳台改造成景观花园，上传微信朋友圈，被好友赞爆了！
- 景观阳台的打造要点，掌握这些最重要
- 匠说 | 让阳光与清风，住进家里
热点动态分享
- 2806
- 2683
- 2548
- 2344
- 2201
- 1834
- 1651
- 1497
- 1384
- 1311
