todolist实现刷新关闭页面内容不变，下次打开时上次的内容仍然存在

最新推荐文章于 2023-06-12 10:22:20 发布

前后端杂货铺

最新推荐文章于 2023-06-12 10:22:20 发布

阅读量484

点赞数

分类专栏： VUE前端开发文章标签： vue js html5 css3 vue.js

本文链接：https://blog.csdn.net/qq_36604863/article/details/105762450

版权

VUE前端开发专栏收录该内容

6 篇文章 1 订阅

订阅专栏

todolist

今天做了一个Vue的小程序

分享一下

先看一下效果图：

实现效果

点击刷新

内容不变，关闭效果也一样

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		html,body{
			width:100%;
			height: 100%;
			margin: 0;
			padding: 0;
			background-color: gray;
		}
		.main{
			width:100%;
			height: auto;
		}		
		.add{
			width:100%;
			height: 2rem;
			background-color: black;
			display: flex;
			align-items: center;
			}
		.addmodel{
			width:30%;
			height: 70%;
			display: flex;
			flex-flow: row;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
		}
		.add input{
			display: block;
			width:66%;
			height: 100%;
			background-color: whitesmoke;
			margin: 0 auto;
			outline: none;
			border: none;
			border-radius: 0.3rem;
			padding-left: 0.625rem;
		}
		.add button{
			display: block;
			width:3rem;
			height: 100%;
			border-radius: 0.3rem;
			border: none;
			outline: none;
		}
		.thingsmodel{
			width:40%;
			height: auto;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
		}
		.thingstitle{
			width:100%;
			height: auto;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
		}
		.things{
			width:100%;
			height: auto;
		}
		.things li{
			width:100%;
			height: auto;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
			align-items: center;
			font-size: 1.5rem;
			background-color: whitesmoke;
			padding: 0 1rem;
			border-left: 0.3125rem solid #bfbfbf;
		}
		.left{
			width:auto;
			display: flex;
			flex-flow: row;
			justify-content: left;
			align-items: center;
		}
		.left input{
			width:20px;
			height: 20px;
		}
		.jian{
			width:1.25rem;
			height: 1.25rem;
			border-radius: 50%;
			border: 3px double #bfbfbf;
			background-color: black;
			text-align: center;
			line-height: 1.25rem;
			color: white;
			cursor: pointer;
		}
		[v-cloak] {
		display: none;
		} 
		
	</style>
	<body>
		<div class="main">
			<div class="add">
				<p class="addmodel">
				<input type="text" v-model="msg" v-on:keyup.enter="getvalue"/>
				<button v-on:click="getvalue">添加</button>
				</p>
			</div>
			<div class="thingsmodel" v-cloak>
			<div class="thingstitle">
				<h1>正在进行</h1>
				<h1 class="index0" v-text="nowindex">0</h1>
			</div>
				<div class="things" v-if="istrue">
					<li v-for="(item,index) in nowel" class="now">
					<p class="left">
					<input name="Checkbox" type="button" v-on:click="istrue(this,item,index)">
					<span class="cont">{{item}}</span>
					</p>
					<span class="jian" v-on:click="clearnow(item,index)">-</span>
					</li>
				</div>
			</div>
			<div class="thingsmodel" v-cloak>
			<div class="thingstitle">
				<h1>已经完成</h1>
				<h1 class="index0" v-text="haventindex"></h1>
			</div>
			<div class="things" v-if="ishavent" >
				<li v-for="(item,index) in haventel" class="havent">
				<p class="left">
				<img src="./img/checked.PNG" v-on:click="ishavent(this,item,index)" />
				<span class="cont">{{item}}</span>
				</p>
				<span class="jian" v-on:click="clearhavent(item,index)">-</span>
				</li>
			</div>
			</div>
		</div>
	</body>
</html>

js代码：

var app = new Vue({
		el:'.main',
		data:{
			msg:'',
		    nowindex:0,
			nowel:[],
			haventindex:0,
			haventel:[],
			checked:true
		},
		created:function(){
			var lastnowel = JSON.parse(localStorage.getItem("nowel"));
			var nowindex = parseInt(localStorage.getItem('nowindex'));
			if(nowindex=='NAN'||typeof(nowindex)=='NAN'){
				console.log(nowindex);
				nowindex = 0;
			}
			console.log(lastnowel);
			var lasthaventel = JSON.parse(localStorage.getItem("haventel"));
			var haventindex = parseInt(localStorage.getItem("haventindex"));
			if(haventindex=='NAN'||typeof(haventindex)=='NAN'){
				haventindex=0;
			}
			var str = typeof(lastnowel);
			var str1 = typeof(lasthaventel);
			if(str!=undefined&&lastnowel!="undefined"){
				this.nowel = lastnowel;
				if(str1!=undefined&&lasthaventel!="undefined"){
					this.haventel = lasthaventel;
				}
				this.nowindex = nowindex;
				this.haventindex = haventindex;
			}
			
		},
		methods:{
			getvalue:function(){
				var msg = this.msg;
				if(msg==""||msg==null){
					alert("此字段不能为空");
					return;
				}
				this.nowindex = this.nowindex+1;
				var nowindex = this.nowindex;
				this.nowel.splice(this.nowindex-1,1,msg);
				this.localstore();
			},
			istrue:function(obj,item,index){
			this.nowel.splice(index,1)
			var len = this.haventel.length; 
			this.haventel.splice(this.haventindex,1,item);
			this.nowindex = this.nowindex-1;
			this.haventindex = this.haventindex+1;
			this.localstore();
			},
			ishavent:function(obj,item,index){
				this.haventel.splice(index,1);
				var len = this.nowel.length; 
				this.nowel.splice(this.nowindex,1,item);
				this.haventindex = this.haventindex-1;
				this.nowindex = this.nowindex+1;
				this.localstore();
				Vue.set(obj,"checked","checked");
			},
			clearnow:function(item,index){
				this.nowel.splice(index,1);
				this.nowindex = this.nowindex-1;
				this.localstore();
			},
			clearhavent:function(item,index){
				this.haventel.splice(index,1);
				this.haventindex = this.haventindex-1;
				this.localstore();
			},
			localstore:function(){
				var nowel = this.nowel;
				console.log(nowel);
				var haventel = this.haventel;
						if(typeof(nowel)!=undefined&&nowel!="undefined"&&nowel!=undefined){
							localStorage.setItem('nowel',JSON.stringify(this.nowel));
							localStorage.setItem('nowindex',this.nowindex);
							if(typeof(haventel)!=undefined&&nowel!="undefined"&&haventel!=undefined){
								localStorage.setItem('haventel',JSON.stringify(this.haventel));
								localStorage.setItem('haventindex',this.haventindex);
							}
							console.log("yes");
						}else{
							console.log(3);
						}
			}

		}
	
	});

源码：todolist