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

布满荆棘的人生 2022-05-19 08:16 224阅读 0赞

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