vue写ToDoList

主要功能就是通过数据的双向绑定，列表循环渲染

html代码：

<div id="app">        
	<header>            
		<section>                
			<label for="title">ToDoList</label>                
			<input type="text" v-model = "todo" @keyup.enter = "addtodo" id="title"  placeholder="添加ToDo" required autocomplete="off">           
 		</section>        
 	</header>        
	 <section>            
	 	<h2>正在进行 <span>{{ todolen }}</span></h2>            
	 	<ol class="demo-box">                
	 		<li v-for="(item,index) in todolist" :key="index+'todo'" v-if = "item.done === false ">                    
	 			<input type="checkbox" @change = "changeTodo(index,true)">                    
	 			<p>{{item.todo}}</p>                    
	 			<a @click = "deleteTodo(index,true)">-</a>                
	 		</li>            
	 	</ol>            
	 	<h2>已经完成 <span>{{ todolist.length - todolen }}</span></h2>            
	 	<ul id="donelist">                
	 		<li v-for="(item,index) in todolist" :key="index+'down'" v-if = "item.done === true ">                    
	 			<input type="checkbox" @change = "changeTodo(index,false)" checked>                   
	 			<p>{{item.todo}}</p>                    
	  			<a @click = "deleteTodo(index,false)">-</a>                
	  		</li>            
	  	</ul>        
	  </section>   
</div>

js代码：

<script>        
	const vm = new Vue({            
		el: "#app",            
		data: {                
			todo : '', //要添加的任务                
			todolist : [], //任务数组                
			todolen : 0, //长度            
		},            
		methods : {                
			addtodo(){ //添加                   
	 			let todoObj = {                        
				     todo:this.todo,                        
				     done:false                    
	 			}                   
	  			this.todolist.push(todoObj);                    
	  			this.todolen++;                    
	  			this.todo = '';                
  			},                
	  		changeTodo(index,done){ //复选框改变                   
	   			if(done){                     
				   this.todolen--,                        
				   this.todolist[index].done = true;                   
	    			}else{                        
	    				this.todolen++;                       
	     				this.todolist[index].done = false;                    
	     			}                
	     		},                
	     		deleteTodo(index,done){ //删除                    
	     			if(done){                        
	    					this.todolen--;                   
	      			}                   
	       			this.todolist.splice(index,1);               
	        	}            
	       }        
       })  
</script>

css代码：

*{           
	margin: 0;            
	padding: 0;        
}        
body {            
	margin: 0;            
	padding: 0;            
	font-size: 16px;            
	background: #CDCDCD;        
}        
header{            
	height: 50px;            
	background: rgba(47,47,47,0.98);        
}        
section {            
	margin: 0 auto;        
}        
label {            
	float: left;            
	width: 100px;            
	line-height: 50px;            
	color: #DDD;            
	font-size: 24px;            
	cursor: pointer;            
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;        
}        
header input {            
	float: right;            
	width: 60%;            
	height: 24px;            
	margin-top: 12px;            
	text-indent: 10px;            
	border-radius: 5px;            
	box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;            
	border: none;            
	outline: none;        
}        
h2 {            
	position: relative;        
}        
span {            
	position: absolute;            
	top: 2px;            
	right: 5px;            
	display: inline-block;            
	padding: 0 5px;            
	height: 20px;            
	border-radius: 20px;            
	background: #E6E6FA;            
	line-height: 22px;            
	text-align: center;            
	color: #666;            
	font-size: 14px;        
}        
li {            
	height: 32px;            
	line-height: 32px;            
	background: #fff;            
	position: relative;            
	margin-bottom: 10px;            
	padding: 0 45px;            
	border-radius: 3px;            
	border-left: 5px solid #629A9C;            
	box-shadow: 0 1px 2px rgba(0,0,0,0.07);            
	list-style: none;        
}        
li input {            
	position: absolute;            
	top: 2px;            
	left: 10px;            
	width: 22px;            
	height: 22px;            
	cursor: pointer;        
}        
li a {            
	position: absolute;            
	top: 2px;            
	right: 5px;            
	display: inline-block;            
	width: 14px;            
	height: 12px;            
	border-radius: 14px;            
	border: 6px double #FFF;            
	background: #CCC;            
	line-height: 14px;            
	text-align: center;            
	color: #FFF;            
	font-weight: bold;            
	font-size: 14px;            
	cursor: pointer;        
}        
ul li {            
	border-left: 5px solid #999;            
	opacity: 0.5;        
}        
@media screen and (min-width: 620px){            
	section {                
		width: 600px;                
		padding: 0 10px;            
	}        
}