学习尚硅谷Vue的TodoList案例下半部分总结

2024-01-07 06:44

本文主要是介绍学习尚硅谷Vue的TodoList案例下半部分总结,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

今天学习尚硅谷Vue的TodoList案例四到八节的内容,主要实现的功能有勾选、删除、底部统计、底部交互这几部分。先说勾选,想要获取到用户是否勾选,就要给checkbox多选框注册鼠标点击事件,这里的思路是用户虽然是获取到了是否勾选但还要知道勾选的是哪个事项,这时就要拿到事项对应的id,然后通过数组forEach方法遍历已有的事项做一个if判断里面的id和用户点击的事项的id直到一致之后就将事项里面的勾选值更改,即可实现页面和数据都是一致的了,以上的操作其实是在item组件中使用了App组件的方法,这里需要注意的是以现在的知识量想要子组件用到父组件身上的方法,就需要通过将父组件的方法写成函数的形式引入到子组件内让其接收,子组件调用的时候还可以传参会给父组件身上的函数做处理,但后面会学到更好方法来解决这个问题,在实现这个功能的同时也引出了v-mode双向数据绑定改变props数据的情况,我们之前学过props引入进来的数据只能读取不能修改,但这里却可以将它修改,通过测试发现Vue只能监测到我们修改整个对象(也就是内存的地址),但监测不到我们修改对象里面的值,虽然是可以这么改掉props的数据但是不提倡这么做。

下一个要实现的是删除功能,这个和勾选功能很相似,同样是给删除按钮绑定点击事件,触发事件先去获取事项的id,然后在App文件中通过数组的filter方法将删除的id事项过滤掉,使用filter这个方法Vue是可以检测到你改变了数组的,这时它就会帮我们重新渲染一般就可以达到数据和页面都删除的功能了。

最后要实现的就是底部的部分了,统计这里就比较直接,全部事项的总数就是数组的长度,但已完成的事项数量可以用不同的方法实现,首先是用数组的forEach方法实现,在方法外面先定义一个i变量作为已完成事项的计数,将事项的done勾选值作为判断条件,勾选则i++,最后得到已完成的事项总数,另一种是数组的reduce方法,这个方法需要传入两个参数,第一个参数是一个函数,第二个参数是初始值,这里的初始值是作为计数的起点,重点是第一个参数的函数,这个函数同样可以接收两个参数,第一个参数就是刚才的初始值,而第二个参数是数组的元素,有了元素我们就可以对它进行判断,判断条件成立的话就在return初始值加一,以此类推最后就得出了满足条件的事项。统计作为之后剩下最后一个就是清楚已完成的任务功能,因为这个功能比较特殊,事项如果全选的话那边底部的选项框也要自动勾选上,还有一种就是点击底部选项框时上面的事项全部都要勾选或取消,考虑到这是双向的情况下我们最好使用v-model双向数据绑定的形式来实现,这样两边都可以读取或修改v-model的数据了,有了这个思路之后实现该功能就变得简单明了了。

这篇关于学习尚硅谷Vue的TodoList案例下半部分总结的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/579047

相关文章

Qt实现网络数据解析的方法总结

《Qt实现网络数据解析的方法总结》在Qt中解析网络数据通常涉及接收原始字节流,并将其转换为有意义的应用层数据,这篇文章为大家介绍了详细步骤和示例,感兴趣的小伙伴可以了解下... 目录1. 网络数据接收2. 缓冲区管理(处理粘包/拆包)3. 常见数据格式解析3.1 jsON解析3.2 XML解析3.3 自定义

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》:本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多

MySQL 中的 JSON 查询案例详解

《MySQL中的JSON查询案例详解》:本文主要介绍MySQL的JSON查询的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 的 jsON 路径格式基本结构路径组件详解特殊语法元素实际示例简单路径复杂路径简写操作符注意MySQL 的 J

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Python Transformers库(NLP处理库)案例代码讲解

《PythonTransformers库(NLP处理库)案例代码讲解》本文介绍transformers库的全面讲解,包含基础知识、高级用法、案例代码及学习路径,内容经过组织,适合不同阶段的学习者,对... 目录一、基础知识1. Transformers 库简介2. 安装与环境配置3. 快速上手示例二、核心模

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Windows Docker端口占用错误及解决方案总结

《WindowsDocker端口占用错误及解决方案总结》在Windows环境下使用Docker容器时,端口占用错误是开发和运维中常见且棘手的问题,本文将深入剖析该问题的成因,介绍如何通过查看端口分配... 目录引言Windows docker 端口占用错误及解决方案汇总端口冲突形成原因解析诊断当前端口情况解