详细vue实现本地存储添加删除修改功能综合案例

最新推荐文章于 2024-05-21 23:21:19 发布

VIP文章温L

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量1.9k

点赞数 4

文章标签：前端 javascript html vue.js

本文链接：https://blog.csdn.net/lwf0829/article/details/121502600

版权

实现功能：

输入的内容添加到正在进行列表中，

双击修改功能，

点击esc键，取消，还是之前的内容，

点击回车，修改成功，

修改框失焦时修改成功，

选中按钮时进入已完成列表，未选中时在正在进行中列表，

点击删除进行删除当行，

本地存储下次打开上次添加的还在

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		*{
			padding: 0;margin: 0;
		}
			ul{
				list-style: none;
			}
			li{
				width: 220px;
				height: 40px;
				border: 1px solid gainsboro;
				margin-top: 4px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #6CE26C;
			}
			.del{
				margin-right: 5px;
				border: none;
				width: 20px;
				height: 20px;
				background-color: #008200;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 过滤输入内容

最低0.47元/天解锁文章

温L

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
详细vue实现本地存储添加删除修改功能综合案例

实现功能：输入的内容添加到正在进行列表中，双击修改功能，点击esc键，取消，还是之前的内容，点击回车，修改成功，修改框失焦时修改成功，选中按钮时进入已完成列表，未选中时在正在进行中列表，点击删除进行删除当行，本地存储下次打开上次添加的还在<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <st
复制链接

扫一扫