vue 学习计划列表 ToDoList

短命女 2022-12-02 13:52 163阅读 0赞

# vue 学习计划列表 ToDoList #

附上代码：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="app">
    			<h1>To Do list</h1>
    			<input type="text" placeholder="请输入计划" v-model="temp" @keyup.enter="addItem" />
    			<h3>正在进行</h3>
    			<div>
    				<div class="item" v-for="item in dolist" :key="item.title">
    					<input type="checkbox" v-model="item.done">
    					<span>{ { item.title}}</span>
    					<button  @click="delItem(item)">删除</button>
    				</div>
    			</div>
    			<h3>已经完成</h3>
    			<div>
    				<div class="item" v-for="item in undolist" :key="item.title">
    					<input type="checkbox" v-model="item.done" />
    					<span>{ { item.title}}</span>
    					<button @click="delItem(item)">删除</button>
    				</div>
    			</div>
    		</div>
    		
    		<script type="text/javascript">
    			new Vue({ 
    				el:"#app",
    				data:{ 
    					temp:'',//绑定输入框
    					list:[ //最后list的内容就没用了，已设为空
    						{ title:"学习HTML",done:true},
    						{ title:"学习JavaScript",done:true},
    						{ title:"学习vue",done:true},
    						{ title:"学习react",done:false},
    						{ title:"学习nui-app",done:false},
    					],//tode清单列表
    				},
    				computed:{ 
    						"dolist":function(){ 
    							return this.list.filter(item=>!item.done)
    						},//完成列表
    						"undolist":function(){ 
    							return this.list.filter(item=>item.done)
    						},//未完成列表 item.done 默认false
    				},
    				methods:{ 
    					addItem(){ 
    						if(this.temp.trim() === ""){ 
    							alert("不能为空")
    						}else{ 
    							this.list.unshift({ title:this.temp.trim(),done:false});
    							this.temp='';
    						}
    					},
    					delItem(item){ 
    						var ind = this.list.indexOf(item);
    						this.list.splice(ind,1);
    					}
    					
    				},
    				
    				watch:{ 
    					"list":{ //监听list的变化
    						handler:function(){ 
    							var str = JSON.stringify(this.list);//把列表转换为字符串
    							localStorage.setItem("list",str);//存储在文本
    						},
    						deep:true
    					}
    				},
    				//在vue创建完毕 获取 本地数据 ， 并重新赋值给list
    				created(){ 
    					var str = localStorage.getItem("list")||"[]";//获取本地存储的list数据，默认为 []
    					this.list = JSON.parse(str);//把字符串转换为对象 赋值给this.list
    				},
    				
    			})
    			
    		</script>
    	</body>
    </html>