需求: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>