vue 学习计划列表 ToDoList

最新推荐文章于 2024-06-20 00:30:00 发布

想喝橙汁儿

最新推荐文章于 2024-06-20 00:30:00 发布

阅读量2.4k

点赞数 11

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_46328144/article/details/108319900

版权

vue 专栏收录该内容

37 篇文章 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>

想喝橙汁儿

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
12
评论
vue 学习计划列表 ToDoList

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> &l
复制链接

扫一扫

专栏目录