该项目为练手项目，学习vue后根据自己的理解进行设计。该项目运用到了localStorage进行数据存储，可长期保存用户数据。但是并没有加入定时提醒和设置过期时间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue制作清单应用todoList</title>
<style>
*{margin:0;padding: 0;}
.header{background-color: #333;color: #fff;line-height: 84px;}
.header span{display: inline-block;margin-left: 27px;}
.header .inputArea{float: right;line-height: 84px;margin-right: 30px;}
.header .inputArea input{height: 25px;width: 300px;}
.header .inputArea a{text-decoration: none;color: #fff;padding: 15px;}
.todo,.finishtodo{background-color: #f2f2f2;color:#333;}
.todo h4{line-height: 30px;padding:15px;background: #FFEB3B}
.finishtodo h4{line-height: 30px;padding:15px;background: #00bcd4}
.todo li,.finishtodo li{line-height: 52px;font-size: 16px;cursor: pointer;}
.todo li span,.finishtodo li span{width: 92px;display: inline-block;text-align: center;}
.finishtodo li{color: #9e9e9e;}
.todo li a,.finishtodo li a{float: right;text-decoration: none;margin-right: 40px;}
</style>
</head>
<body>
<div id="app">
<div class="header">
<span><h1>todoList</h1></span>
<div class="inputArea">
<input type="text" placeholder="请输入代办事项" v-model="inputValue" @keyup.enter="on_submit">
<a href="javascript:;" @click="on_submit">提交</a>
</div>
</div>
<div class="todo">
<h4>待办事项</h4>
<ul>
<!-- 加入track-by以序列为索引，是的v-for可以列出重复的数据 -->
<!-- 这里track-by可以直接写index不需要$,写$index是我的习惯 -->
<!-- 注意vue1.0和2.0 v-for参数顺序的问题 -->
<li v-for="(item,index) in todoList" track-by="$index" @click="finishToDo(index)" title="点击加入已完成事项">
<span>{{index+1}}</span>{{item}}
<a href="javascript:;" @click.stop="deleteToDo(index)">删除</a>
</li>
</ul>
</div>
<div class="finishtodo">
<h4>已完成事项</h4>
<ul>
<li v-for="(item,index) in finishList" track-by="$index">
<span>{{index+1}}</span>{{item}}
<a href="javascript:;" @click.stop="deleteFinish(index)">删除</a>
</li>
</ul>
</div>
</div>
<script src="../vue221.js"></script>
<script>
var todo = JSON.parse(localStorage.getItem('todo'));
var finish = JSON.parse(localStorage.getItem('finish'));
if(!todo){
todo = [];
}
else if(!finish){
finish = [];
}
new Vue({
el:"#app",
data:{
todoList : todo,
finishList : finish,
inputValue : '',
},
methods:{
on_submit:function(){
if(this.inputValue!=''){
this.todoList.push(this.inputValue);
this.inputValue = '';
this.saveData();
}else{
alert("请输入代办事项");
}
},
finishToDo:function(index){
this.finishList.push(this.todoList[index]);
this.todoList.splice(index,1);
this.saveData();
},
deleteToDo:function(index){
this.todoList.splice(index,1);
this.saveData();
},
deleteFinish:function(index){
this.finishList.splice(index,1);
this.saveData();
},
saveData:function(){
localStorage.setItem('todo',JSON.stringify(this.todoList));
localStorage.setItem('finish',JSON.stringify(this.finishList));
}
}
});
</script>
</body>
</html>效果图：
