利用vue的计算属性和监听实现todolist（包含本地存储）

hello我的朋友

已于 2022-10-10 16:49:37 修改

阅读量350

点赞数

文章标签： vue.js javascript 前端

于 2022-10-10 16:44:24 首次发布

本文链接：https://blog.csdn.net/weixin_62394372/article/details/127247496

版权

如图点击滑板选项自动下滑到已完成已完成后面的数字+1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li {
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model='obj.title' @keyup.enter='addTask'>
			<h3>未完成{{unList.length}}</h3>
			<ul>
				<li v-for="(item,index) in unList">
					<input type="checkbox" v-model='item.done' :key='item.title'>
					<span>{{item.title}}</span>
					<button @click='delTask(item)'>X</button>
				</li>
			</ul>
			<h3>已完成{{doList.length}}</h3>
			<ul>
				<li v-for="(item,index) in doList">
					<input type="checkbox" v-model='item.done' :key='item.title'>
					<span>{{item.title}}</span>
					<button @click='delTask(item)'>X</button>
				</li>
			</ul>
		</div>
		<!-- 引入vue -->
		<script src="./js/vue.js"></script>
		<script>
			new Vue({
				el: "#app",
				data: {
					obj: {
						title: '',
						done: false
					},
					list: localStorage.task == undefined ? [] : JSON.parse(localStorage.task) //存放人物列表
				},
				methods: {
					addTask() {
						// this.list.unshift({title:this.obj.title,done:false});
						//将obj的属性全部拷贝到当前对象
						this.list.unshift({
							...this.obj
						});
						this.obj = {
							title: '',
							done: false
						};
						
					},
					delTask(obj) {
						//获取删除的下标
						let index = this.list.indexOf(obj);
						this.list.splice(index, 1);
						
					}
				},
				computed: {
					//过滤出合适的数据
					unList() {
						return this.list.filter(obj => {
							return !obj.done
						})
					},
					doList() {
						return this.list.filter(obj => {
							return obj.done
						})
					}
				},
				watch: {
					//实时监听list中的数据 有变化更新本地存储
					'list': {
						deep: true,
						handler() {
							localStorage.task = JSON.stringify(this.list);
						}
					}
				}
			})
		</script>
	</body>
</html>