todolist 效果图：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<script src="https://unpkg.com/vue"></script>
<style type="text/css">
.edit {display:block;width:80%;height:35px;line-height:35px;margin:30px auto;box-sizing:border-box;padding-left:4px;border-radius:4px;border:1px solid #ccc;outline:0;box-shadow:0 0 5px #ccc;}
.list {margin:0 auto;width:80%;}
.unit {position:relative;padding:10px 0;border-bottom:1px solid #efefef;}
.unit:last-child {border-bottom:0;}
.finish {text-decoration:line-through;color:#ccc;}
.del {background:red;text-decoration:none;position:absolute;right:0;font-size:12px;border:0;outline:0;padding:2px 5px;border-radius:5px;color:#fff;}
.empty {font-size:13px;color:#ccc;text-align:center;padding:10px 0;}
</style>
</head>
<body>
<div id="app">
<input class="edit" type="text" v-model="task.content" v-on:keydown.enter="addTask" />
<div class="list">
<div class="unit" v-for="(item,index) in list">
<input type="checkbox" v-on:click="changeState(index)" v-bind:checked="item.finished">
<span v-bind:class="{'finish':item.finished}"> {{item.content}}</span>
<button v-on:click="removeTask(index)" class="del">删除</button>
</div>
</div>
<p class="empty" v-if="list.length == 0">暂无任务</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
task: {
content: '',
finished: false,
deleted: false
},
list: []
},
methods: {
addTask: function() {
this.list.push(this.task);
this.task = {
content: '',
finished: false,
deleted: false
}
},
changeState: function(index) {
var cur = this.list[index].finished;
this.list[index].finished = !cur
},
removeTask: function(index) {
this.list.splice(index, 1)
}
}
}
);
</script>
</body>
</html>
