00:00
好了各位,咱们呢接着往下说,在这一小节呢,咱们把这个功能,哎,还有这个功能呢,给它做一下,首先呢,关注这儿各位,首先我们实现它的初始化展示,也就是说如果上方的这三个我都勾上了,那你说它是不是得被勾选呀,但凡有一个没有勾,也就是已完成的数量和全部的数量是不相等的,那这呢就不能够被勾选对不?各位好,回到代码中找到F特组件,那么刚刚啊,我们在这儿呢,是直接读取了这个点Les属性,其实可以写的再好一点,就是在这儿呢,拿走直接用这个词叫total,然后在这儿呢,你再匹配一个叫做又是一个计算属性,对不?在这儿呢,就可以返回它那个长度了,Return,当然你这儿得加一个this对吧,各位,哎,模板里边用东西的时候是不用加this的,哎,但是在这儿呢,你得写对不?各位你之前在这儿直接写todos就可以,因为它已经在那个VC身上了,但是在这儿你得补一个this是不?各位好了刷新啊,效果是。
01:00
正常的来添加一个学习走全部是四是吧,已完成是二来写写这儿吧,各位,那你说这勾还是不勾,哎,就是初始化这个展示啊,勾还是不勾,其实就是取决于这俩人他相不相等是吧?各位,哎,所以说非常简单,如果你想直接写啊也行,各位,那在这儿是不是得来这么一个属性叫做check的,那到底勾还是不勾呢?我得问一个事儿问的谁呢?这个down count到底和这个东西是不是相等的,对吧?各位,如果等那就勾上呗,好看一下效果啊,刷新勾上它俩就等了,那就勾上,那但凡有一个没有勾,它俩不相等,那就不勾呗,是吧?哎,你这么写行,各位,但是你又把模板里边的这个表达式写的很复杂,那我们这么写叫做A字O什么意思,就是所有了吗?哎,这又是一个计算属性,那这边是不是还得给它写上啊,叫做A字哦好,A字O是不是得是一个不尔值,各位你说对吧。
02:00
啊,你写的是check box吗?你写的是check德玛,那你这肯定得是一个布尔值啊,那这怎么写呢?是不是还是刚才的那个东西啊,但是在这各位是不是得加上this,那这儿是不是也得加上this?哎,值得大家注意的是啊,这挺有意思的,同学,你说这绿色的本身是不是就是一个计算属性?那我在问你这个粉色的本身是不是也是一个计算属性?哎,同学,有意思了啊,你看这个红色的计算属性A字奥是怎么算出来的?拿着刚才的这个绿色的计算属性,哎,就是这儿,嗯,又拿着这个粉色的给它算出来的,也就是说一个计算属性可以通过另外其他的两个或者多个计算属性再进行计算,也就是说是允许套娃的,OK,保存,回头看一下效果啊,刷新,那这会一勾就全勾了,而只要没有一个勾,哎,那这会儿呢,就取消,是这意思不?哎,OK啊,但你这么写啊,有bug什么bug呢,敲诈各位抽烟呀。
03:00
删掉喝酒啊删掉开车呀,删掉各位,这不应该勾了,你觉得呢,因为这是零,这是零,这不应该勾呀,所以说呢,回来把逻辑写的完整一点,再写一个,且条件这得怎么写呢?啊,是不是得让这个总数它得大于零啊同学我们知道啊,那个总数无论是total还是那个当total它不可能出现负数,你说对不?哎,最次它是零,就是一个都没有,那所以说得保证呢,总数是大于零的,并且它俩再相等,哎,那我给你勾上对吧,来测试一下啊,刷新走,删掉。这儿呢,删掉哎走确定这儿呢删掉走哎不勾对吧,各位,还有就是各位你说如果我们做的再到位一点啊,是不是应该是这样的,就是如果你完成的那个任务啊,一个都没有,就是你的todo list里面没有任何一个要做的事儿,那你觉不觉得这块其实整个不应该展示是不?我都没有东西,我还全选个什么劲儿呢,对吧,我还清楚什么已完成的呢,我连一个任务都没有啊,所以说同学你觉不觉得,诶就这个东西,整个这个福特的这个div,它有的时候展示,有的时候不展示,那你说我们可以用什么呢?你用v if行不行可以,那你用这个V-show行不行也可以,那这怎么写呢?这其实你写哪个都可以,你完全可以再算出来一个,但是没有必要了,各位你觉得是不是写total就可以呢?各位你体会体会,涛偷取值可能是零或者是零以外的值,零以外的值肯定是正数,那正数转过来肯定是布尔值为真,所以说我写这个没毛病吧。
04:36
如果total是零,那就不展示呗,好,回到这儿,其实你看已经有效果了啊,那咱刷新一下啊,验证一下抽烟给它删掉这个呢,给它删掉这个呢,也给它删掉,OK,同学,你看底部就没了是不?哎,好了,刷新一波,那你别忘了呀,它本身还有一个功能呢,各位就是你点它的时候,这些是不是得全选呀?哎,所以说按照逻辑走,它是不是得给一个点击事件,或者是用这个也行,叫做change是吧,各位走,那这怎么写呢?叫做checkout对吧?哎,选择所有,那得配置一个methods往下找,那这个comp我就得折叠起来,哎,在这再写一个叫做methods checkout同学,当你说这块得拿到什么呢?我要全选,那你说用拿到ID吗?不用,各位你觉不觉得啊,当我勾选这个按钮的时候,我只需要知道你到底是全选还是全部选是不就可以了,各位,哎,这按钮没别的功能啊,对吧,就是全选和取消全选嘛,是不。
05:36
好,那回来,那你说这得怎么写呢?啊,首先得拿到这个东西,到底是勾了还是没勾,那怎么拿呢?哎,你可以这么写啊E,然后呢,Conslo就借助这个事件对象嘛,Conslo e.target点诶可不是value了,各位check box你怎么能拿value呢?你得拿这个人叫做check it是不?各位,哎,我知道有些同学说老师啊,那你这操作DOM了呀,各位,我这可没操作do,如果我后边写了一个等号给他赋值,那可是操作DOM了,我这只是借助盗墓拿到一个属性而已是不?各位我这么写当然是最方便的啊,来保存看一下效果啊,刷新一波,嗯,我勾选那就是全选,撤,那我再取消,诶那就是false呗,所以说同学你看我已经成功的拿到了,我到底全选还是全部选是不?那你说接下来呢,同学告诉存储这一堆todos的人,全选或者全部选是不就可以了,那谁存储着呀?
06:36
啊,是不是APP呀,那所以说各位你明白了,APP里边就是对todos的各种增删改查,那在这儿再来一个,诶叫做什么呢?叫做全选,然后再来一个or全不选,或者叫做取消全选可以吧?啊那这怎么写呢?还是check哦,再来一个todo走,那这儿呢,我得拿到一个down值对不对,到底是选还是不选呀,那这里边怎么写呀,我得遍利所有的todos对吧?用最传统的FOR1就可以啊然后呢,拿到每一个todo项,我要做的事呢,就是这样,Todo点当值,我不管你原来是勾选还是不勾选啊,不管你原来的当值为真为假,现在都听他的,是这意思不?各位哎,那你说这东西得传给谁啊,谁用传给谁呗,谁用是不是福特在用来传过去走你啊,那这边传了,那你说这儿呢,是不是就得声明接收。
07:36
好,在这儿走着诶传过来,那你说这儿呢,直接调用是不就可以了,然后呢,把这个到底全选还是全部选给它传过去,这行不要了,来看一下效果啊刷新,现在呢是抽烟和开车选着的,喝酒没有选,那现在呢,我要全选走是不是全选上,那我取消全选走是不是全都取消,哎所以说写到这儿呢,这个功能啊,我们完成了,但是还有一个更好的办法,各位怎么玩呢?瞧着这么写啊,回来我把这行代码呢,再给你复制一份,然后呢,我把这行啊给你注掉,咱们分析一波各位你为什么写红色框的代码,是不是因为实现那个初始的勾选,那你为什么去写这个绿色框的代码呢?是不是为了以后的交互,对吧,一个管初始化展示的,一个呢,管以后交互的,那同学,你听我说,一个熟悉的场面又出现了,他是谁呢?一个check box,或者不说check box,它是一个输入类型的节点。
08:36
是不输入的,初始值要展示,并且以后还要有交互,那同学你听我说就可以把它们呢删掉,哎,毁成一个,那一个怎么写呢?用VGA model,然后呢,还是读取这个A字all,你慢慢体会啊,各位,首先我这么写呀,初始化展示肯定是没问题的,你琢磨琢磨,VGA model绑定的是什么一个布尔值,而且它是check boxs类型,是不是可以完成正常的初始化显示,那你瞧瞧呗,回到这儿刷新一波是没问题的,那说老师我要勾选呢,那你瞧着啊,各位可能就要出点事儿来,同学目前是不是没有勾选呀,为什么没有勾选,是不是因为a all的值为false,所以没勾选,也就是说在这儿嘛,人家在这算出来的嘛,对吧?各位好,接下来你看着我要勾选走,你报错了,这个错误之前我带着你看过,说一个计算属性A字奥被定义了,但是没有使用三。
09:36
Peter,为什么会出现这问题呢?跟大家说说,那你看啊,这A字or同学是不是一个计算属性,是计算出来的吧?计算属性你怎么写的呀?你是不是用简写方式啊?同学这么写得有一个前提,就是A字all只被读取不被修改,是这意思不?各位哎,但是现在你看看,你把it's our写在了vega model里面,那就意味着等你以后go或者取消go的时候都会引起它的变化,你说对吗?各位,哎,那你说他写简写方式好像就不行了,人家提示的很到位呀,各位是不是得写那个get塞最完整的写法啊,所以说在这儿,哎,你可以这么写,把它写成一个配置对象里边,当然得写什么呢?Get,那get的逻辑就是刚才那么写,那同学写不写塞呢,也得写吧,那塞里边干嘛呢?甭管干嘛,我得拿到你到底勾还是没勾,是不是有一个value值,那我可以consult。
10:36
Dog哥,给你做一个分格,再写这个Y6,来咱瞧一下效果啊,各位回来刷新,那现在我想勾选目前是啥状态,没有勾,那现在我想勾来走着,各位你看是不是就是车,那现在已经勾选了,我想取消,各位走是不是就false,那你知道在这个逻辑里边你应该干嘛了?各位是不是把刚才写的这个逻辑给它复制往这儿一放就可以了啊,而且呢,我不需要通过盗墓元素去获取,到底勾不勾了,因为塞已经帮我维护好这个值了,对不?哎,你可以不叫这个value,你可以叫这个check k d对吧?各位,但是value呢,能语义化一点,给人的感觉就是A奥被修改了,那改了的值呢,肯定是这个Y6,那为什么这个Y6就是一个不尔值的呢?很简单,因为a all本身返回的就是一个布尔值,再其次这个A奥呢被你应用在了一个check box上,那这个check box勾选只有两个结果。
11:36
要么为真,要么为假,同学我问你这么写逻辑设备能写下去,并且你这么写呢,不用再配置这个methods了,对不?各位同学现在体内体会出来计算属性的完整版写法也挺有用的,哎,这回看一下效果啊同学借助开发者工具咱们观察一波啊,来打开这三个人呢,分别是做完了没做完做完了现在我全选看,全变成抽,那我全部选的那就都是false呗,对不?各位哎,琢磨琢磨,那你看同学这么写是不是能更好一点呀,从模板上来说是不是怎么讲逻辑更紧密一点,对不对?哎,无论是初始化的还是以后改的都用这个VGA model,诶说老师我记得前两天你讲那个是吧,上两小节你讲那什么的时候,不是说VGA model不行吗?各位,我们是在这儿说的,说这个VGA model不太推荐,为啥?各位还是那句话,VGA model不接这个锅,别往他身上甩锅,VGA model停。
12:36
好的,就是你没用好,你在这儿是把接收到的一个props值跟人家发生了一个绑定,那这肯定不行啊,那V-model回头一取消,那你这肯定改了,那你这一改不要紧的,你改的是啊,但是人家这不是各位福特是吧,人家绑在这个A奥上了,同学,我就问你一句话,A奥是不是pro,不是啊a all是我自己计算出来的,那我计算出来的东西难道就不能改吗?A当然可以是不,各位所以说你看啊todos todo这个案例呢,你从他身上出发呀,能练出很多的东西啊来,咱闲言少叙,把这个呢再给他完成了,就是清除已完成,这就特别简单了,各位啊,找到那按钮给他绑定一个点击事件走,那怎么写呢?Clear粒,清空clear粒哦,是不是就可以了,给它复制来往下还得找到ne clear粒啊,里边咋写同学ID用传吗?不用啊,勾选还是不勾选不重要了,同学一个参数都不用传,就是告诉APP你把所有。
13:36
值为真的,给我删掉是不就可以了?哎,那所以说回到APP里面,同学给它加上最后一个方法吧,叫做什么呢?清除所有已经完成的todo,那当然也叫做clear,嗯,Clear什么呢?O,再来一个todo OK,这里边怎么写很简单,this.todo点我是不是再过滤一下就得了呀?那我过滤的条件是什么呢?拿到每一个todo我的返回值来写好了啊,走written的条件是todo点当我这么写同学对吗?不对,这么写刚好写反了对不对?哎,你得这么写,同学荡值为真的我不要,所以说取个反,那当然别忘了这个动作就是再给它复回去,因为filter不影响原数组,对不?各位好,Clear out todo交给谁谁用啊,My foot在用,那所以说交给他对不?各位,那这边交了,那你说这边呢,就得。
14:36
声明接收划到这儿走是吧,那在这儿呢就简单了,在这个里面直接掉就可以了,This点它是不是就完成了呀,来看一下效果啊,回到这儿刷新一波抽烟和开车勾着呢啊清除已完成是不是就没了?当然如果你做的更好一点,可以再写一个弹窗提示,对不弹窗我们写过了啊,也不是什么高端的东西,在这儿呢,我们就不说了,来整体演示一下啊各位打开这个APP啊,然后控制台呢,咱也瞄着点,目前全部是三已完成是二对吧?各位来添加一个叫学习OK,默认是不勾选的啊,那现在我勾选下边有一个联动的效果,哎,那我全选,那就都选上,我全部选,那就都取消开车学习勾上清除所有已完成的OK是不没了啊,那我再全选,我再清除整个福特,全都隐藏对不?各位OK,这么一个小小的todo list案例呢,我们就做完了啊,下一小节呢,我们去整体总结一下这个小案例,那么这一小节。
15:36
咱先到这儿。
我来说两句