<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ToDOlist</title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h1>To DO List</h1>
<input type="text" placeholder="输入计划" @keyup.enter="addItem()" v-model="temp" />
<h3>未完成</h3>
<div>
<div class="item" v-for="item in undolist" :key="item.title">
<input type="checkbox" v-model="item.done" />
<span>{{item.title}}</span>
<button type="button" @click="delItem(item)">删除</button>
</div>
</div>
<h3>已经完成</h3>
<div>
<div class="item" v-for="item in dolist" :key="item.title">
<input type="checkbox" v-model="item.done" />
<span>{{item.title}}</span>
<button type="button" @click="delItem(item)">删除</button>
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
created(){
var str=localStorage.getItem("list")||"[]";//获取本地存储的list，默认为【】
this.list=JSON.parse(str);//把字符串转换为对象
},
data: {
temp: "", //和输入框绑定
list: [{
title: "学习vue",
done: true
}, {
title: "学习uni-app",
done: false
}, {
title: "学习JavaScript",
done: true
}], //todo清单列表
},
methods: {
delItem(item) {
var ind = this.list.indexOf(item);
this.list.splice(ind, 1);
},
addItem() { //添加列表
if (this.temp.trim() === "") {
alert("不能为空");
} else {
this.list.unshift({
title: this.temp.trim(),
done: false
});
this.temp = "";
}
}
},
computed: {
"dolist": function() {
return this.list.filter(item => item.done)
}, //完成列表
"undolist": function() {
return this.list.filter(item => !item.done)
}, //未完成列表
},
watch:{
"list":{
handler:function(){//监听列表的变化
var str=JSON.stringify(this.list);//列表转化为字符串
localStorage.setItem("list",str);//存储在本地
},
deep:true
}
}
})
</script>
</body>
</html>
todolist