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

B站看到了一套vue框架入门课程，手敲了一个小项目（小黑记事本）一、实现效果输入框输入任务，按下回车键，添加到任务最后鼠标移动到某项任务，该任务后面出现红色叉号，点击可删除次任务记事本最下方左边统计当前任务条数记事本最下方右边clear实现清空所有任务二、运行界面三、代码（含样式）<!--卡片阴影样式：https://blog.csdn.net/qq_44607694/article/det

月上小楼

3035人浏览 · 2021-01-26 18:31:53

月上小楼 · 2021-01-26 18:31:53 发布

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

一、实现效果

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

二、运行界面

运行界面

可删除任务

三、代码（含样式）

<!--
	卡片阴影样式：https://blog.csdn.net/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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^