Vue小黑记事本案例

最新推荐文章于 2024-04-19 10:52:39 发布

昨日的某某

最新推荐文章于 2024-04-19 10:52:39 发布

阅读量484

点赞数 4

分类专栏： Vue 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_51501183/article/details/120420672

版权

Vue 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

1.小黑记事本效果图

2.代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>小黑记事本</title>
		<style>
			*{
				margin: 0 ;
				padding: 0;
				background-color: white;
			}
			.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-size: 32px;
				color: red;
				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:
     		 		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>

昨日的某某

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
Vue小黑记事本案例

1.小黑记事本效果图2.代码展示<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>小黑记事本</title> <style> *{ margin: 0 ; padding: 0; background-color: white; } .todo{ background-...
复制链接

扫一扫