需求：Vue实现待办事项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<style>
#app {
margin:100px auto 0;
600px;
}
.input-box {
font-size:0;
}
.input-box input {
box-sizing: border-box;
500px;
font-size:16px;
border:1px solid #ccc;
padding:10px;
line-height: 18px;
}
.input-box button {
100px;
padding:10px;
font-size:16px;
border:1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
line-height: 18px;
border-left:none;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.todo-list {
margin-top:20px;
}
.todo-list li{
border:1px solid #ccc;
padding:10px;
margin-bottom:10px;
font-size:0;
}
.todo-list i {
margin-right:20px;
display: inline-block;
16px;
height:16px;
border:1px solid #ccc;
cursor: pointer;
vertical-align: bottom;
}
.todo-list p {
500px;
display: inline-block;
font-size:16px;
margin:0;
}
.todo-list span {
50px;
cursor: pointer;
color:red;
font-size:16px;
}
.done-list {
margin-top:20px;
}
.done-list li{
border:1px solid #ccc;
padding:10px;
margin-bottom:10px;
background: #999;
color:#ccc;
cursor: not-allowed;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<div class="input-box">
<input type="text" v-model.trim="newTodo" placeholder="请输入代办事项">
<button @click="addTodo">添 加</button>
</div>
<div class="todo-list">
<ul>
<li v-for="(todo,index) in todoList" :key="index">
<i @click="addDone(index)"></i>
<p>{{ todo }}</p>
<span @click="deleteTodo(index)">×</span>
</li>
</ul>
</div>
<h3>已完成</h3>
<div class="done-list">
<ul>
<li v-for="done in doneList" :key="done">{{ done }}</li>
</ul>
</div>
</div>
<script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
todoList: ['今天代码敲三遍', '晚上和小莉莉去喝酒'],
doneList: [],
newTodo:''
},
methods: {
addTodo() {
//如果输入框是空的，不执行
if (this.newTodo.length === 0) {
return;
}
//添加内容到 代办事项
this.todoList.push(this.newTodo)
//清空输入框
this.newTodo = '';
},
deleteTodo(index) {
this.todoList.splice(index, 1)
},
addDone(index) {
//把内容添加到 doneList
this.doneList.push(this.todoList[index])
//从todoList删掉
this.deleteTodo(index);
}
}
})
</script>
</body>
</html>