Vue.js TodoList小案例
阿新 • • 發佈:2018-12-22
使用Vue.js寫的TodoList小案例。
完成功能:增加任務,修改任務狀態,刪除任務和清除已完成任務。
程式碼:(修改Vue引入,即可使用)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList案例</title> <style> .done { text-decoration: line-through; color: #cccccc; } </style> </head> <body> <div id="app"> <h1>Todo</h1> <p>{{todos.filter(item => !item.done).length }} of {{todos.length}} remaning <a href="#" @click="archive">[archive]</a></p> <p v-for="(item,index) in todos"> <input type="checkbox" v-model="item.done"> <span v-bind:class="{done:item.done}">{{item.title}}</span> <button @click="removeTodo(index)">×</button> </p> <input type="text" v-model="todoText" @keydown.enter="addTodo"> <button @click="addTodo">Add</button> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> const todos = [ { id: 1, title: '吃飯', done: true }, { id: 2, title: '睡覺', done: false }, { id: 3, title: '打豆豆', done: true } ] new Vue({ el: '#app', data: { todos, todoText: '' }, methods: { addTodo() { const todoTest = this.todoText.trim(); if (!todoTest.length) { return; } this.todos.push({ id: todos[todos.length - 1].id + 1, title: todoTest, done: false }) this.todoText = ''; }, removeTodo(index) { this.todos.splice(index, 1) }, archive(){ this.todos = this.todos.filter(item => !item.done); } } }) </script> </body> </html>