用vue实现todos，todos里面包含了增删改查功能，不会的看过来，保准你会！！！

最新推荐文章于 2022-11-04 19:37:49 发布

WangLingyun111

最新推荐文章于 2022-11-04 19:37:49 发布

阅读量1k

点赞数 3

分类专栏： vue todos效果组件文章标签： html vue.js html5

本文链接：https://blog.csdn.net/m0_62201566/article/details/120612599

版权

本文详细介绍了如何使用Vue.js构建一个包含增删改查功能的todos应用。首先从创建静态页面开始，接着进行组件划分，最后实现动态效果。提供了相关组件如TopVote、CenterVote、BottomVote、Todos、App的代码展示，适合Vue初学者学习。

摘要由CSDN通过智能技术生成

一.先写静态页面，然后把静态页面分组件划分，最后再写效果，效果有增删改查。

二.效果展示：

三.代码展示：

todos.css:

*{
	padding: 0;
	margin: 0;
}
ul,ol,li{
	list-style: none;
}
body{
	background-color: #F5F5F5;
}
#app{
	width: 550px;
	margin: 10px auto;
	
}
.title{
	height: 150px;
	line-height: 150px;
	color: #EAD7D7;
	font-size: 80px;
	font-weight: bold;
	text-align: center;
	width: 100%;
}
.con{
	width: 100%;
	background-color: #fff;
}
.top{
	width: 100%;
	position: relative;
	display: flex;
	background-color: #fff;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
}
#inp{
	width: 100%;
	padding-left: 40px;
	box-sizing: border-box;
	height: 40px;
	outline: none;
	border: 0;
	margin: 10px 0;
	color: #E6E6E6;
	font-size: 16px;
}
.select{
	position: absolute;
	
	width: 40px;
	height: 40px;
	margin: 10px 0;
	color: #999;
	text-align: center;
	line-height: 40px;
	font-weight: 600;
	font-size: 24px;
	transform: rotate(90deg);
}
.selbol{
	color: #333;
}
.center{
	width: 100%;
}
.list li{
	width: 100%;
	height: 40px;
	border-bottom: 1px solid #E6E6E6;
	display: flex;
	align-items: center;
	background-color: #fff;
	justify-content: center;
	border-bottom: 1px solid #E6E6E6;
}
.choose{
	background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E') no-repeat center;
	background-size: 24px 24px;
	width: 40px;
	height: 40px;
	
	
}
.info{
	height: 40px;
	line-height: 40px;
	color: #4d4d4d;
	font-size: 16px;
	flex: 1;
}

.list .checked .choose{
	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%