vue本地项目——小黑记事本

最新推荐文章于 2023-08-23 15:44:10 发布

wuhhhhhhha

最新推荐文章于 2023-08-23 15:44:10 发布

阅读量3.4k

点赞数 14

分类专栏：前端文章标签： vue html js css

本文链接：https://blog.youkuaiyun.com/wcy8733996wcy/article/details/113186489

版权

前端专栏收录该内容

9 篇文章

订阅专栏

B站看到了一套vue框架入门课程，敲了一个小项目（小黑记事本），欢迎批评指教。

一、实现效果

输入框输入任务，按下回车键，添加到任务最后
鼠标移动到某项任务，该任务后面出现红色叉号，点击可删除次任务
记事本最下方左边统计当前任务条数
记事本最下方右边clear实现清空所有任务

二、运行界面

运行界面

可删除任务

三、代码（含样式）

<!--
	卡片阴影样式：https://blog.youkuaiyun.com/qq_44607694/article/details/89605857
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小黑记事本</title>
		<style>
			*{
				margin: 0 ;
				padding: 0;
				background-color: #F0F0F0;
			}
			.todo{
				background-color: red !important;
				width: 98%;
				list-style: none;
				line-height: 35px;
				border-top:0.5px solid #E0E0E0;
				border-bottom:0.5px solid #E0E0E0;
				border-left:1px solid #E0E0E0;
				border-right:1px solid #E0E0E0;
			}
			#todoapp{
				width: 280px;
				margin: 100px auto;
			}
			h1{
				font-family:"隶书";
				font-size: 32px;
				color: saddlebrown;
				text-align:center;
				margin-bottom: 40px;
			}
			input::-webkit-input-placeholder {
				color: #9C9C9C;
			}
			.new-todo{
				outline: none;
				width: 95%;
				height: 35px;
				border:1px solid #E0E0E0;
				background-color: white;
				padding:0 4px;
				color: #9C9C9C;
				font-size: 15px;
			}
			.view{
				display: flex;
				padding:0 4px;
				color: #9C9C9C;
				font-size: 15px;
				background-color: white;
			}
			.index{
				flex: 1;
				background-color: white;
			}
			label{
				flex: 10;
				background-color: white;
			}
			.destroy{
				flex: 1;
				display: none;
				color: red;
				border: none;
				background-color: white;
			}
			.view:hover .destroy{
				display: block;
			}
			.todo-count{
				display: block;
				width: 95%;
				line-height: 20px;
				color: #9C9C9C;
				font-size: 10px;
				padding:0 4px;
				border:0.5px solid #E0E0E0;
				background-color: white;
				/*box-shadow:5px 5px 20px rosybrown;*/
				box-shadow:
     		 		0 0.0625px 0.1875em 0 rgb(0 0 0 / 16%), 
     		 		0 0.5em 0 -0.25em #f2f2f2ed, 
     		 		0 0.5em 0.1875em -0.25em rgba(0, 0, 0, 1), 
     		 		0 1em 0 -0.5em #e5e5e5, 
     		 		0 1em 0.1875em -0.5em rgba(0, 0, 0, 1);
			}		
			strong{
				background-color: white;
			}
			.todo-clear{
				position: relative;
				background-color: white;
				color: #9C9C9C;
				font-size: 10px;
				top: -24px;
				left: 250px;
				border: none;
			}

		</style>
	</head>
	<body>
		<section id="todoapp">
			<header class="header">
				<h1>小黑记事本</h1>
				<input v-model="inputValue" @keyup.enter="add" class="new-todo" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" />
			</header>
			
			<section class="main">
				<ul class="todo-list">
					<li class="todo" v-for="(item,index) in list">
						<div class="view">
							<span class="index">{{index+1}}</span>
							<label>{{item}}</label>
							<button class="destroy" @click="remove(index)">×</button>
						</div>
					</li>
				</ul>
			</section>
			<footer class="footer">
				<span class="todo-count">
					<strong>{{list.length}}</strong> items left
				</span>
				<button class="todo-clear" @click="clear">clear</button>
				
			</footer>
		</section>
		<footer class="info"></footer>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app=new Vue({
				el:"#todoapp",
				data:{
					list:["听音乐","散步","敲代码"],
					inputValue:"好好学习"
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue);
					},
					remove:function(index){
						this.list.splice(index,1);
					},
					clear:function(){
						this.list=[];
					}
				}
			})
		</script>
	</body>
</html>