效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<title>todolist</title>
<style>
*{
margin: 0;
padding: 0;
}
#app{
width: 70%;
margin: 50px auto;
}
.done{
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<div>
<div>
<div class="form-group">
<textarea class="form-control" v-model="val"></textarea>
</div>
<div class="form-group">
<button class="btn btn-danger" @click="send">发送</button>
</div>
</div>
<hr/>
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in list">
<input type="checkbox" v-model="item.done"/>
<span :class="{'done':item.done}">{{item.content}}</span>
<button class="btn btn-success pull-right" v-if="item.done">完成</button>
<button class="btn btn-warning pull-right" @click="del(index)" v-else>删除</button>
<div class="clearfix"></div>
</li>
</ul>
</div>
</div>
<script>
new Vue({
el:"#app",
data:{
list:[
{id:"1",content:"吃饭饭",done:false},
{id:"2",content:"睡觉觉",done:false},
{id:"3",content:"打豆豆",done:false}
],
val:""
},
methods:{
send(){
var obj={
id:this.list[this.list.length-1].id+1,
content:this.val,
done:false
}
this.list.push(obj)
this.val=""
},
del(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>