学习尚硅谷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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

springboot循环依赖问题案例代码及解决办法

《springboot循环依赖问题案例代码及解决办法》在SpringBoot中,如果两个或多个Bean之间存在循环依赖(即BeanA依赖BeanB,而BeanB又依赖BeanA),会导致Spring的... 目录1. 什么是循环依赖?2. 循环依赖的场景案例3. 解决循环依赖的常见方法方法 1:使用 @La

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

java常见报错及解决方案总结

《java常见报错及解决方案总结》:本文主要介绍Java编程中常见错误类型及示例,包括语法错误、空指针异常、数组下标越界、类型转换异常、文件未找到异常、除以零异常、非法线程操作异常、方法未定义异常... 目录1. 语法错误 (Syntax Errors)示例 1:解决方案:2. 空指针异常 (NullPoi

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(