利用Vue方法实现一个简单的TODOlist

效果如下：

 

 代码如下：

<!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>