不多说，上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist</title>
<link rel="stylesheet" type="text/css" href="static/css/iview.css">
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/iview.min.js"></script>
<style>
.wrap {
width: 200px;
margin: 0 auto;
margin-top: 20px;
}
.todo-input {
display: flex;
justify-content: space-between;
}
.todolist li {
margin-top: 10px;
padding: 5px;
padding-top: 10px;
padding-left: 10px;
display: flex;
justify-content: space-between;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
transition: ease-in-out .5s;
cursor: pointer;
}
.donelist {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
}
.donelist li {
margin-top: 10px;
padding: 5px;
padding-top: 10px;
padding-left: 10px;
display: flex;
justify-content: space-between;
box-shadow: 0px 0px 5px rgba(0, 0, 0, .1);
transition: ease-in-out .5s;
cursor: pointer;
width: 200px;
}
.active {
font-size: 12px;
border-radius: 4px;
}
.passive {
color: #fff;
background: #222;
border-radius: 2px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<div class="todo-input">
<i-input v-model="text" placeholder="输入待办事项"></i-input>
<i-button type="success" @click="addTodo(text)">增加</i-button>
</div>
<ul class="todolist">
<li v-for="(todo,index) in todoList" v-bind:class="{active:todo.state}" @click="hasDone(index)">
<p>{{todo.text}}</p>
<Icon v-if="!todo.state" type="information-circled" color="orange"></Icon>
</li>
</ul>
<ul class="donelist">
<li v-for="(done,index) in doneList" v-bind:class="{passive:done.state}" @click="cancelDone(index)">
<p>{{done.text}}</p>
<Icon v-if="done.state" type="checkmark" color="green" />
</li>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
todoList: JSON.parse(localStorage.getItem('todoList')) || [], //待办事项列表,默认从localstorage获取
doneList: JSON.parse(localStorage.getItem('doneList')) || [], //完成事项列表,默认从localstorage获取
text: '',
},
methods: {
//添加待办事项
addTodo: function (text) {
if (!text) {
this.$Message.error('添加失败');
return
}
this.todoList.push({
text: text,
state: false
});
//添加成功,存入localstorage
this.saveStorage('todoList', this.todoList);
this.$Message.success('添加成功');
this.text = ''; //清空input
},
//点击设置已完成事项
hasDone: function (index) {
this.todoList[index].state = !this.todoList[index].state; //切换
if (this.todoList[index].state) { //state: true
this.doneList.push(this.todoList[index]); //添加到donelist
this.todoList.splice(index, 1); //todolist剔除该事项
this.saveStorage('todoList', this.todoList); //存入storage
this.saveStorage('doneList', this.doneList); //存入storage
return this.$Message.success('已完成');
}
//state: false
this.todoList.push(this.doneList[index]); //add to todolist
this.doneList.splice(index, 1); //del this from donelist
this.saveStorage('doneList', this.doneList); //save donelist
this.saveStorage('todoList', this.todoList); //save todolist
this.$Message.error('未完成');
},
//cancel item of donelist
cancelDone: function (index) {
this.todoList.push({ //add item canceled to todolist
text: this.doneList[index].text,
state: false //set state false !!!
});
this.doneList.splice(index, 1); //del item from donelist
this.saveStorage('doneList', this.doneList); //save donelist
this.saveStorage('todoList', this.todoList); //save todolist
this.$Message.success('取消成功');
},
saveStorage: function (key, value) {
localStorage.setItem(key, JSON.stringify(value));
}
}
})
</script>
</body>
</html>
console面板
image.png
