vue.js实现的，添加和删除代办事项列表页面源码

本文链接：https://blog.csdn.net/mazai5080/article/details/124560388

大家好，今天给大家介绍一款，vue实现的，添加和删除代办事项列表页面源码（图1）。送给大家哦，获取方式在本文末尾。

图1

可以添加代办事项、删除代办事项、将未完成任务移动到列表前面（图2）

图2

代码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10152，需要的朋友，关注文末公众号，搜索10152，即可获取。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Todo 列表 UI</title>
<style>
* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html, body {
	background:#f7f1f1;
	font-size:1.1rem;
	font-family:'Quicksand', sans-serif;
	height:100%;
}
@keyframes strikeitem {
	to { width:calc(100% + 1rem); }
}

#todolist {
	margin:4rem auto;
	padding:2rem 3rem 3rem;
	max-width:500px;
	background:#FF6666;
	color:#FFF;
	box-shadow:-20px -20px 0px 0px rgba(100,100,100,.1);
}
#todolist h1 {
    /*text-align:center;*/
    font-weight:normal;
    font-size:2.6rem;
    letter-spacing:0.05em;
    border-bottom:1px solid rgba(255,255,255,.3); 
}
#todolist h1 span {
	display:block;
	font-size:0.8rem;
	margin-bottom:0.7rem;
	margin-left:3px;
	margin-top:0.2rem;   
}

#todolist .emptylist {
	margin-top:2.6rem;
	text-align:center;
	letter-spacing:.05em;
	font-style:italic;
	opacity:0.8;
	
}
#todolist ul {
	margin-top:2.6rem;
	list-style:none;
}
#todolist li {
	display:flex;
	margin:0 -3rem 4px;
	padding:1.1rem 3rem;
	justify-content:space-between;
	align-items:center;
	background:rgba(255,255,255,0.1);
}

#todolist .actions {
	flex-shrink:0;
	padding-left:0.7em;
}
#todolist .label {
	position:relative;
	transition:opacity .2s linear;
}
#todolist .done .label {
	opacity:.6;
}
#todolist .done .label:before {
	content:'';
	position:absolute;
	top:50%;
	left:-.5rem;
	display:block;
	width:0%;
	height:1px;
	background:#FFF;
	animation:strikeitem .3s ease-out 0s forwards;
}
#todolist .btn-picto {
	border:none;
	background:none;
	-webkit-appearance:none;
	cursor:pointer;
	color:#FFF;
}