vue实现简约版todolist

一、HTML内容

<div id="app">
	<p>{{obj.title}}</p>
	<input type="text" v-model='obj.title' @keyup.enter='addTask'>
	<ul>
		<li v-for='obj in list'>
		    <input type="checkbox" v-model='obj.done'>
		    {{obj.title}}
	    	<button @click='delTask(obj)'>X</button>
	    </li>
	</ul>
</div>

二、script内容

new Vue({
		el:'#app',
		data:{
			//接受每一个对象的值
			obj:{
				title:'',
				done:false
   			},
			list:[]  //存放任务列表
		},
		methods:{
			addTask(){
		        this.list.unshift({...this.obj});  //将obj的属性全部拷贝到当前对象
		    	this.obj={title:'',done:false};
			},
			delTask(obj){
				 // 获取删除的元素的下标
				 var index=this.list.indexOf(obj);
				 this.list.splice(index,1)
			}
		}
})

       相对于其他来说，vue的使用更为简洁快速，仅仅需要注意接收对象，设置相对于的值存放列表，进行方法使用，在html里面进行对应的数据渲染即可