Vue入门（二十九）

todolist之基本结构——完善todolist

开始编写代码

        准备好上一讲的代码

在父组件中实现添加list列表功能

按回车后清空输入框

代码（NavHeader.vue）

		setup(props, ctx) {
			let value = ref('')
			// 按回车确认
			let enter = () => {
				// 把输入框的内容传递给父组件
				ctx.emit('add', value.value)
				// 清空输入框
				value.value = ''
				// console.log(value.value);
			}
			return {
				value,
				enter
			}
		},

添加任务(向list中添加数据)（HomeView.vue）

代码

			// 添加任务
			let add = (val) => {
				value.value = val
				// 调用 mutation
				store.commit('addTodo', {
					title: value.value,
					complete: false
				})
				console.log(val);
			}

效果

任务去重

输入重复的任务时不添加到列表中

			// 添加任务
			let add = (val) => {
				value.value = val
				// 先判断有没有存在的任务 如果任务存在 不能重复添加
				let flag = true
				list.value.map(item => {
					if (item.title === value.value) {
						// 有重复的任务
						flag = false
						alert('任务已存在')
					}
				})
				if (flag) {
					// 调用 mutation
					store.commit('addTodo', {
						title: value.value,
						complete: false
					})
				}
				console.log(val);
			}

效果

在父组件中实现删除list列表功能

补充上一节课的内容

代码（NavMain.vue）

		setup(props, ctx) {
			// 删除任务
			let del = (item, index) => {
				ctx.emit('del',index)
				// console.log(item);
				// console.log(index);
			}
			return {
				del
			}
		}

代码（HomeView.vue）

<nav-main :list='list' @del='del'></nav-main>

		setup() {
			// 删除任务
			let del = (val) => {
				console.log(val);
			}
			return {

				del
			}
		}

效果

代码（HomeView.vue）

			// 删除任务
			let del = (val) => {
				// 调用 mutation
				store.commit('delTodo', val)
				console.log(val);
			}

效果

list列表删除后显示暂无任务

代码（NavMain.vue）

<template>
	<!-- 编写 HTML 内容-->
	<div>
		<div v-if="list.length > 0">
			<div v-for="(item,index) in list" :key="index">
				<div class="item">
					<input type="checkbox" v-model="item.complete" />
					{{item.title}}
					<button class="del" @click="del(item,index)">删除</button>
				</div>
			</div>
		</div>
		<div v-else>
			暂无任务
		</div>
	</div>
</template>

效果

统计已完成任务的个数

代码（NavFooter.vue）

		setup(props) {
			// 统计已完成
			let isComplete = computed(() => {
				// 过滤已完成
				let arr = props.list.filter(item => {
					return item.complete
				})
				return arr.length
			})

			return {
				isComplete,

			}
		}

效果

 

清除已完成

代码（NavFooter.vue）

			// 清除已完成
			let clear = () => {
				// 过滤未完成
				let arr = props.list.filter(item => {
					return item.complete === false
				})
				ctx.emit('clear', arr)
				// console.log('clear');
			}
			return {
				isComplete,
				clear
			}

代码（HomeView.vue）

		<nav-footer :list='list' @clear='clear'></nav-footer>

			// 清除已完成的任务
			let clear = (val) => {
				// 调用 mutation
				store.commit('clear', val)
			}
			return {
				add,
				value,
				list,
				del,
				clear
			}

效果

​​​​​​​

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)