待做的事情
{{item}} 完成
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.done .content{
text-decoration: line-through;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="nav">
<input type="text" v-model='todoInput' placeholder="请输入你即将要做的事情" @keydown.enter='inputText' name="" id="" value="" />
</div>
<div class="todo">
<h1>待做的事情</h1>
<div class="todoItem" v-for='(item,index) in todoList'>
<span class="content">{{item}}</span>
<span class="btn" @click='done($event,index)'>完成</span>
</div>
</div>
<div class="done">
<h1>已完成的事情</h1>
<div class="todoItem" v-for='item in doneList'>
<span class="content">{{item}}</span>
</div>
</div>
</div>
<!--
localstorage:永久性的保留,保存是以字符串的形式存储
sessionStorage:一个会话期间保留,保存是以字符串的形式存储
dotoList:
1/输入框的内容跟数据模型进行绑定,(并且查看localstorage是否有之前的数据，如果有那么将其放置进todoList、doneList)
2、要设置1个放置待办事项的数据的数组，将每一次数据的变更保留到localstorage
3、要设置1个放置已完成事项的数据的数组，将每一次数据的变更保留到localstorage
4、交互事件书写(输入框是回车键按下，并且输入框有数据，才进行操作，将输入框的内容，放置到todoList数组里面)，将每一次数据的变更保留到localstorage
-->
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
todoInput:'',//1/输入框的内容跟数据模型进行绑定
todoList:[],//要设置1个放置待办事项的数据的数组
doneList:[]//要设置1个放置已完成事项的数据的数组
},
methods:{
inputText:function(e){
if(e.key=='Enter'){
console.log(e)
if(this.todoInput){
this.todoList.push(this.todoInput)
console.log(this.todoList)
localStorage.todoList = JSON.stringify(this.todoList)
}
}
},
done:function(e,index){
console.log(e)
console.log(index)
var delItem = this.todoList.splice(index,1)
this.doneList.push(delItem[0])
localStorage.doneList = JSON.stringify(this.doneList)
localStorage.todoList = JSON.stringify(this.todoList)
}
},
mounted:function(){
if(localStorage.todoList){
this.todoList = JSON.parse(localStorage.todoList)
}
if(localStorage.doneList){
this.doneList = JSON.parse(localStorage.doneList)
}
}
})
</script>
</body>
</html>
已完成的事情
{{item}}