Vue小案例---小黑记事本一、运行界面二、实现功能输入框输入任务，按下回车键，添加到任务最后鼠标移动到某项任务，

一、运行界面

QQ截图20211217222301.png

二、实现功能

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

三、代码

样式代码

<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>

具体实现代码

<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" v-if="list.length!=0">
				<strong>{{list.length}}</strong> items left
			</span>
			<button class="todo-clear" @click="clear" v-show="list.length!=0">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>
</body>