利用Vue写一个简易的ToDo-list

最新推荐文章于 2022-11-03 15:48:05 发布

赤妖碟

最新推荐文章于 2022-11-03 15:48:05 发布

阅读量222

点赞数 1

本文链接：https://blog.csdn.net/Ayangdaye/article/details/121503550

版权

todolist的一些简易功能：

1.当点击前面的多选框的时候，这个事件会跳到下面的已完成里面

2.同样的，当点击完成里面的事件时，这个时间会跳回上面的未完成

3.当想删除一条事件时，可以点击删除

4.当刷新页面的时候，要有本地存储，刷新页面不影响我之前的事件进度

废话不多说，上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			*{
				color: red;
				text-align: center;
			}
			.div1{
				
				line-height: 2.5;
			}
			.div2{
				line-height: 2.5;
			}
			.div1 div,.div2 div{
				background-color: pink;
				margin-top: 5px;
			}
			b{
				color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="box">
			ToDo-list:<input type="text" @keyup.enter="add()" v-model="mytext" />
			<h2>正在进行的任务，个数<b>{{nodolist.length}}</b></h2>
			<div class="div1">
				<div v-for="item of nodolist" :key="item.name">
					<input type="checkbox" v-model="item.done" />
					<span v-show="item.state==0" @click="item.state=1;lstext=item.name">{{item.name}}</span>
					<input type="text" v-model="lstext" v-show="item.state==1" @keyup.enter="item.state=0;item.name=lstext" @blur="item.state=0;item.name=lstext"
					 @keyup="item.state=0;item.name=lstext" />
					<button @click="del(item)">删除</button>
				</div>
			</div>
			<!-- ----------------------------------------------- -->
			<h2>正在进行的任务，个数<b>{{dolist.length}}</b></h2>
			<div class="div2">
				<div v-for="item of dolist" :key="item.name">
					<input type="checkbox" v-model="item.done" />
					<span v-show="item.state==0" @click="item.state=1;lstext=item.name">{{item.name}}</span>
					<input type="text" v-model="lstext" v-show="item.state==1" @keyup.enter="item.state=0;item.name=lstext" @blur="item.state=0;item.name=lstext"
					 @keyup="item.state=0;item.name=lstext" />
					<button @click="del(item)">删除</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#box",
			data: {
				list: [
					// name标题，done是否完成 state 0正常状态 1 编辑状态 
					{
						name: "学习warform",
						done: false,
						state: 0
					},
					{
						name: "学习ow",
						done: true,
						state: 0
					},
				],
				list: JSON.parse(localStorage.getItem("list") || "[]"),   //取出本地存储
				mytext: '', //临时添加的数据
				lstext: '' //临时修改的数据
			},
			methods: {
				// 添加数据
				add() {
					//判断输入的是不是空
					if (this.mytext === '') {
						alert("你小子别找茬！")
						return;
					}
					//不是空就从数组末尾插入进去
					this.list.push({
						name: this.mytext,
						done: false,
						state: 0
					})
					this.mytext = ''; //清空输入框
				},
				//删除
				del(item) {
					if (window.confirm("确定删除吗？")) {
						var xiabiao = this.list.findIndex(value => value.name === item.name)
						this.list.splice(xiabiao, 1);
					}
				},

			},
			computed: {

				// 判断true和false  来断定显示在上面还是下面
				nodolist() {
					return this.list.filter(item => !item.done);
				},
				dolist() {
					return this.list.filter(item => item.done);
				},

			},
			watch: {
				list: {
					handler() {
						localStorage.setItem("list", JSON.stringify(this.list))   //添加本地存储
					},
					deep: true,   //深度监听
				}
			},
		})
	</script>
</html>

大体思路就是：多选框为ture状态的时候，这条事件在完成里面，为false的时候，在未完成里面