todolist的一些简易功能:
1.当点击前面的多选框的时候,这个事件会跳到下面的已完成里面
2.同样的,当点击完成里面的事件时,这个时间会跳回上面的未完成
3.当想删除一条事件时,可以点击删除
4.当刷新页面的时候,要有本地存储,刷新页面不影响我之前的事件进度
废话不多说,上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
<style>
*{
color: red;
text-align: center;
}
.div1{
line-height: 2.5;
}
.div2{
line-height: 2.5;
}
.div1 div,.div2 div{
background-color: pink;
margin-top: 5px;
}
b{
color: blueviolet;
}
</style>
</head>
<body>
<div id="box">
ToDo-list:<input type="text" @keyup.enter="add()" v-model="mytext" />
<h2>正在进行的任务,个数<b>{{nodolist.length}}</b></h2>
<div class="div1">
<div v-for="item of nodolist" :key="item.name">
<input type="checkbox" v-model="item.done" />
<span v-show="item.state==0" @click="item.state=1;lstext=item.name">{{item.name}}</span>
<input type="text" v-model="lstext" v-show="item.state==1" @keyup.enter="item.state=0;item.name=lstext" @blur="item.state=0;item.name=lstext"
@keyup="item.state=0;item.name=lstext" />
<button @click="del(item)">删除</button>
</div>
</div>
<!-- ----------------------------------------------- -->
<h2>正在进行的任务,个数<b>{{dolist.length}}</b></h2>
<div class="div2">
<div v-for="item of dolist" :key="item.name">
<input type="checkbox" v-model="item.done" />
<span v-show="item.state==0" @click="item.state=1;lstext=item.name">{{item.name}}</span>
<input type="text" v-model="lstext" v-show="item.state==1" @keyup.enter="item.state=0;item.name=lstext" @blur="item.state=0;item.name=lstext"
@keyup="item.state=0;item.name=lstext" />
<button @click="del(item)">删除</button>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#box",
data: {
list: [
// name标题,done是否完成 state 0正常状态 1 编辑状态
{
name: "学习warform",
done: false,
state: 0
},
{
name: "学习ow",
done: true,
state: 0
},
],
list: JSON.parse(localStorage.getItem("list") || "[]"), //取出本地存储
mytext: '', //临时添加的数据
lstext: '' //临时修改的数据
},
methods: {
// 添加数据
add() {
//判断输入的是不是空
if (this.mytext === '') {
alert("你小子别找茬!")
return;
}
//不是空就从数组末尾插入进去
this.list.push({
name: this.mytext,
done: false,
state: 0
})
this.mytext = ''; //清空输入框
},
//删除
del(item) {
if (window.confirm("确定删除吗?")) {
var xiabiao = this.list.findIndex(value => value.name === item.name)
this.list.splice(xiabiao, 1);
}
},
},
computed: {
// 判断true和false 来断定显示在上面还是下面
nodolist() {
return this.list.filter(item => !item.done);
},
dolist() {
return this.list.filter(item => item.done);
},
},
watch: {
list: {
handler() {
localStorage.setItem("list", JSON.stringify(this.list)) //添加本地存储
},
deep: true, //深度监听
}
},
})
</script>
</html>
大体思路就是:多选框为ture状态的时候,这条事件在完成里面,为false的时候,在未完成里面