ToDolist案例源码
vue中的ToDolist案例
下面展示一些 内联代码片
。
TodoList案例参考效果:https://blog.csdn.net/p445098355/article/details/106521571
<template>
<div id="app">
<nav>
<p>TODOlist</p>
<input type="text" placeholder="添加ToDo" v-model="value" @keydown.enter="add" />
</nav>
<div id="nr">
<h3>正在进行({{nolength}})</h3>
<table class="t1" cellspacing="0">
<tr v-for="(item, index) in list" :key="index" v-show="!item.done">
<td>
<input type="checkbox" name id="chbox" @click.prevent="chang(item,true)" />
</td>
<td>
<span v-show="index!=updateindex" @dblclick="update(item,index)">{{item.text}}</span>
<input
type="text"
v-show="index==updateindex"
v-model="item.text"
@keydown.enter="updatesave"
@keydown.esc="updateesc(item)"
/>
</td>
<td>{{item.time |timeFilters}}</td>
<td>
<span @click="del(index)">✖</span>
</td>
</tr>
</table>
<h3>已经完成({{yeslength}})</h3>
<table class="t2" cellspacing="0">
<tr v-for="(item, index) in list" :key="index" v-show="item.done">
<td>
<input type="checkbox" checked name id="chbox" @click.prevent="chang(item,false)" />
</td>
<td>
<span v-show="index!=updateindex" @dblclick="update(item,index)">{{item.text}}</span>
<input
type="text"
v-show="index==updateindex"
v-model="item.text"
@keydown.enter="updatesave"
@keydown.esc="updateesc(item)"
/>
</td>
<td>{{item.time |timeFilters}}</td>
<td>
<span @click="del(index)">✖</span>
</td>
</tr>
</table>
<!-- 筛选 -->
<h3>筛选</h3>
<select v-model="sx">
<option value>请选择</option>
<option value="all">全部</option>
<option value="no">未完成</option>
<option value="yes">已完成</option>
</select>
<ul>
<li v-for="(item, index) in sxlist" :key="index">{{item.text}}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value: "",
list: [],
updateindex: -1,
tempvalue: "",
sx: "",
sxlist: []
};
},
//监听 筛选
watch: {
sx(sx) {
let sxlist = localStorage.list;
if (!sxlist) {
return;
}
this.sxlist = [];
let lists = JSON.parse(sxlist);
switch (sx) {
case "all":
this.sxlist = lists;
break;
case "no":
lists.map(item => {
if (!item.done) {
this.sxlist.push(item)
}
});
break;
case "yes":
lists.map(item => {
if (item.done) {
this.sxlist.push(item)
}
});
break;
}
}
},
//初始化
created() {
let list = localStorage.list;
if (list) {
this.list = JSON.parse(list);
}
},
computed: {
nolength() {
let i = 0;
this.list.map(item => {
if (!item.done) {
i++;
}
});
return i;
},
yeslength() {
let i = 0;
this.list.map(item => {
if (item.done) {
i++;
}
});
return i;
}
},
methods: {
// 添加
add() {
this.list.push({
text: this.value,
time: new Date().getTime(),
done: false
});
this.value = "";
this.tb(); //调用同步
this.list.sort((a, b) => {
//排序
return b.time - a.time;
});
},
//删除
del(index) {
this.list.splice(index, 1);
this.tb(); //调用同步
},
//双击修改
update(item, index) {
this.tempvalue = item.text;
this.updateindex = index;
},
updatesave() {
//修改后保存
this.tb();
this.updateindex = -1;
},
updateesc(item) {
//还原
item.text = this.tempvalue;
this.updateindex = -1;
},
//复选框点击
chang(item, checked) {
if (checked) {
item.done = true;
} else {
item.done = false;
}
this.tb();
this.list.sort((a, b) => {
//排序
return b.time - a.time;
});
},
//同步函数
tb() {
localStorage.list = JSON.stringify(this.list);
}
},
//过滤器
filters: {
timeFilters(ms) {
let data = new Date();
let now = data.getTime();
let rel = (now - ms) / 1000 / 60;
let daystr = "";
if (rel < 5) {
daystr = "刚刚";
} else if (rel >= 5 && rel < 10) {
daystr = "5分钟前";
} else if (rel >= 10 && rel < 30) {
daystr = "10分钟前";
} else if (rel >= 30 && rel < 40) {
daystr = "30分钟前";
} else if (rel >= 40 && rel < 60) {
daystr = "40分钟前";
} else if (rel >= 60 && rel < 120) {
daystr = "1小时前";
} else if (rel >= 120 && rel < 300) {
daystr = "2小时前";
} else if (rel >= 300 && rel < 1440) {
daystr = "5小时前";
} else if (rel >= 1440 && rel < 2880) {
daystr = "1天前";
} else if (rel >= 2880 && rel < 10080) {
daystr = "2天前";
} else if (rel >= 10080 && rel < 43200) {
daystr = "7天前";
} else if (rel >= 43200) {
daystr = "30天前";
}
return daystr;
}
}
};
</script>
<style scoped>
body {
margin: 0;
padding: 0;
}
td {
width: 200px;
}
nav {
width: 100%;
height: 60px;
background: #000;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
p {
width: 200px;
}
h3 {
text-align: left;
}
nav input {
width: 250px;
height: 30px;
border-radius: 10px;
}
#nr {
width: 600px;
margin: 0 auto;
}
#chbox {
width: 20px;
height: 20px;
}
li{
list-style: none;
}
table{
border:none
}
tr{
margin: 10px 0;
}
.t1 td{
background: white;
border: none;
}
.t2 td{
background: rgb(241, 238, 238);
border: none;
}
</style>