版权声明：LT https://blog.csdn.net/LitongZero/article/details/82120483
使用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>