vue.js:todolist任务列表代码(copy即可用)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue todolist - fxy</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
	<div id="root">
		<h3>ToDoList<input v-model="inputValue" v-on:keyup.enter="insert"/></h3>
		<ul style="list-style:none;">
			<p align="left">未完成任务：</p>
			<li v-for="(item1,index) in item1s">
				<input type="checkbox"  @click="todo(item1)"/>
				<label>{{item1.text}}</label>
				<button @click="delete1(item1)">删除</button>
			</li>

			<p>已完成任务：</p>
			<li v-for="(item2,index) of item2s">
				<input type="checkbox" @click="done(item2)"/>
				<label>{{item2.text}}</label>
				<button @click="delete2(item2)">删除</button>
			</li>
		</ul>

	</div>
	
	<script>
		//创建vue实例
		new Vue({
			el:"#root",
			data:{
				item1s:[],
				inputValue:'',
				item2s:[]
			},
			methods:{
				//添加任务
				insert:function(){
					this.item1s.push({text:this.inputValue});
					this.inputValue="";
				},
				
				//未完成任务变成已完成任务
				todo:function(item1){
					//已完成任务列表增加 item1可以通过console看到结构
					this.item2s.push({text:item1.text});
					//从未完成任务列表移除
					this.item1s.splice(this.item1s.indexOf(item1),1)
				},

				//已完成任务变成未完成任务
				done:function(item2){
					//未完成任务列表增加 item2可以通过console看到结构
					this.item1s.push({text:item2.text});
					//从已完成任务列表移除
					this.item2s.splice(this.item2s.indexOf(item2),1)
				},
			
				//删除未完成的任务
				delete1:function(item1){
					this.item1s.splice(this.item1s.indexOf(item1),1)
				},

				//删除已完成的任务
				delete2:function(item2){
					this.item2s.splice(this.item2s.indexOf(item2),1)
				}
			}
		})
	</script>


</body>
</html>
vue.js:todolist任务列表代码(copy即可用)

猜你喜欢
