????????這個待辦事項有以下功能：增刪查，既新增待辦事項，刪除待辦事項，查看全部，未完成，完成待辦事項，當(dāng)鼠標(biāo)移動到待辦事項上時會顯示刪除按鈕

? ? ? ? 分為四個部分來實現(xiàn)：ToDoHeader.vue、ToDoMain.vue、ToDoFooter.vue、ToDoList.vue

ToDoHeader.vue

頭部部分

 <template>
 	<div>
 		<div class="header">
 			<p class="title">待辦事項</p>
 			<input class="new-todo" type="text" placeholder="請?zhí)顚懭蝿?wù)" v-model.trim="name" @keyup.enter="enterName" />
 		</div>
 	</div>
 </template>
 <script setup>
 	import {
 		ref
 	} from 'vue'
 	const name = ref('')
 	const emit = defineEmits(['addTodo'])
 	const enterName = () => {
		// 觸發(fā)自定義事件,為空時彈出警示框
		if(name.value===""){
			alert("任務(wù)名稱不能為空")
			return
		}
 		emit('addTodo', name.value)
 		name.value = ''
 	}
	
 </script>

 <style>
	 .title{
		 font-size: 20px;
		 color: red;
		 height: 40px;
		 width: 86.5%;
		margin: 10px 40px 0 40px;
		 padding-top: 10px;
		 text-align: center;
		 border: 1px solid #ccc;
	 }
	 .new-todo{
		 height: 40px;
		 width: 80%;
		 margin: 5px 40px 0 40px;
		 padding: 4px 0 0 65px;
		 border: 1px solid #ccc;
	 }
 </style>

ToDoMain.vue

列表總體樣式和刪除樣式

<template>
	<div class="main">
		<ul class="todo-list">
			<li v-for="item in list" :key="item.id" :class="{ completed: item.done }">
				<div class="view">
					<input class="toggle" type="checkbox" v-model="item.done" />
					<label>{{ item.name }}</label>
					<button class="destroy" @click="delTodo(item.id)"><div class="overlay">x</div></button>
				</div>
			</li>
		</ul>
	</div>
</template>

<script setup>
	//聲明props
	const props = defineProps(['list'])
	//聲明自定義事件
	const emit = defineEmits(['delTodo'])
	const delTodo = id => {
		id && emit('delToDo', id) // 觸發(fā)事件
	}
</script>

<style>
	.view{
		position: relative;
		height: 40px;
		width: 800px;
		margin-left: 20px;
		padding-top: 15px;
		border-bottom: 1px solid #ccc;
	}
	li{
		margin-left: 20px;
	}
	label{
		position: absolute;
		left: 70px;
		top: 23px;
	}
	
	.destroy{
		float: right;
		border: none;
		background-color: white;
	}
	 .overlay{
		 position: absolute;
		 top: 26px;
			 font-size: 40px;
		     color: black;
		     /* 字體居中 */
		     transform: translate(-50%,-50%);
		     font-size: large;
		     /* 懸停前完全透明 */
		     opacity: 0;
		     transition: 0.3s ease-in-out; 
		 }
		  
		 .view:hover .overlay{
		     transition: 0.3s ease-in-out;
		     /* 懸停時完全不透明 */
		     opacity: 1;
		 }
		 
		 input[type="checkbox"] {
		 		appearance: none;
		 		/*取消默認(rèn)的復(fù)選框樣式*/
		 		width: 30px;
		 		/*設(shè)置方形寬度為20px*/
		 		height: 30px;
		 		/*設(shè)置方形高度為20px*/
		 		border: 1px solid #000;
		 		/*設(shè)置邊框樣式*/
		 		border-radius: 50%;
		 		/*將方形的邊框改為圓形*/
		 	}
		 
		 	input[type="checkbox"]:checked {
		 		&:before {
		 			content: '\2713';
		 			/*添加一個對勾,默認(rèn)顏色是黑色*/
		 			color: greenyellow;
		 			/*將對勾顏色改為白色*/
		 			font-size: 20px;
		 			margin-left: 5px;
		 			/*將對勾左邊距改為4px,讓它看著像居中*/
		 		}
		 	}
</style>

ToDoList.vue

列表部分

 <template>
 	<ToDoHeader @addTodo="addTodo"></ToDoHeader>
 	<ToDoMain :list="showList" @delToDo="delToDo"></ToDoMain>
 	<ToDoFooter :lastLength="lastLength" @updateStatus="updateStatus"></ToDoFooter>
 </template>
 <script setup>
 	import ToDoHeader from './ToDoHeader.vue'
 	import ToDoMain from './ToDoMain.vue'
 	import ToDoFooter from './ToDoFooter.vue'
 	import {
 		computed,
 		ref
 	} from 'vue'
 	const list = ref([{
 			id: 1,
 			name: '跑步',
 			done: false,
 		},
 		{
 			id: 2,
 			name: '健身',
 			done: true,
 		},
 	])
 	const addTodo = name => {
 		list.value.push({
 			name,
 			done: false,
 			id: ~~(Math.random() * 1000)
 		})
 	}
 	const delToDo = id => {
 		list.value = list.value.filter(item => item.id !== id)
 	}
 	const lastLength = computed(() => {
 		return list.value.filter(item => !item.done).length
 	})
 	const status = ref('all')
 	const showList = computed(() => {
 		if (status.value === 'all') {
 			return list.value
 		}else if (status.value === 'active') {
 			return list.value.filter(item => !item.done)
 		}else if (status.value === 'completed') {
 			return list.value.filter(item => item.done)
 		}
 	})
 	
 	const updateStatus = setStatus => {
 		status.value = setStatus // 將子組件的狀態(tài)賦值給父組件
 	}
 </script>
 <style>
 </style>

ToDoFooter.vue

頁腳部分

<template>
	<div class="footer">
		<span class="todo-count">共<strong>{{ lastLength }}</strong>條未完成任務(wù)</span>
		<ul class="filters">
			<li class="oneli">
				<a @click.prevent="emit('updateStatus', 'all')" :class="{ selected: status === 'all' }"
					href="#/">全部</a>
			</li>
			<li>
				<a @click.prevent="emit('updateStatus', 'active')" :class="{ selected: status === 'active' }"
					href="#/active">未完成</a>
			</li>
			<li>
				<a @click.prevent="emit('updateStatus', 'completed')" :class="{ selected: status === 'completed' }"
					href="#/completed">已完成</a>
			</li>
		</ul>
	</div>
</template>

<script setup>
	const emit = defineEmits(['updateStatus'])
	const props = defineProps(['lastLength', 'status'])
</script>

<style>
	.oneli{
		
		margin-left: 50%;
	}
	.todo-count {
		margin-left: 40px;
		float: left;
	}

	ul {
		margin-left: -25px;
		list-style-type: none;
	}

	li {
		float: left;
		margin-left: 4px;
	}

	a {
		border: 1px solid #d3d3d3;
		/* 清除a標(biāo)簽?zāi)J(rèn)效果 */
		text-decoration: none;
		color: black;
		font-size: 8px;
	}
</style>

最后更改main.js中的代碼

main.js

import { createApp } from 'vue'
import App from './components/ToDoList.vue'

createApp(App).mount('#app')

總體效果：

新增效果：

刪除效果:

鼠標(biāo)懸停時會顯示刪除按鈕

查找效果：

全部效果：

未完成效果：

完成效果：

文章來源地址http://www.zghlxwxcb.cn/news/detail-858104.html

到了這里，關(guān)于用Vue做一個待辦事項的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！