00:00
下面呢,咱们再来看啊。我要做这个功能,当我用鼠标点击这个某个数据它的复选框的时候,选中了,但是下边已完成多少个没有改变,包括我这边有多少个数据,这边全部有多少个,有没有显示,那我们再来看看之前做好的这个啊,我就点一个已完成两个,全部有几个呢?三个,我再来一个啪一回这啪一回这好。个是不是我点他的手删掉。OK,这都没问题,比如我再来一个删掉还是全中,全部选中的状态,那怎么做呢?啊,当然这块的话,我再来给他来一个宝马。啊,怎么做呢?思路是什么呢?我应该在我的负极组件当中,把我负极组件这个数组当中数据传到什么呢?这个子集组件,这是特组件。那么我传啥呢?负极组件当中有这个数组,子集组件这边也需要这个数组,是不是,所以说这样干啊。我找到我的APP组件。然后注意看,直接在我的组件里边写上一个什么呢?冒号todo等于todo。
01:00
那现在我们可以看到。这个数组就被我传到了福特组件当中,那我的福特组件里边做什么事情?无非就是接受一下这个数据呗,Pros。注意看啊,To do。Type。这个位置要注意了啊,我接收到的是一个数组,那我这个数组是不是应该把它变成一个真正的土do类型的数组吧,所以说这块应该是A,然后as再来这么一个回调啊,这是这么一种写法,然后变成了todo,而且是一个数组形式,那我这边需要这个todo接口。Import括号来一个todo from当前的这个什么呢?点点杠。找到taps,找到todo。下一个re eqquiid,把这个写上啊,必须的啊,就必须的意思啊,必须得给我传,不传容易出事吗?是不是好,那这块已完成全部多少个搞定了,看着啊,全部。怎么写?直接就是todo字,点什么来,这不就搞定了吗?
02:04
搞定了它之后,然后我们再来看啊,这块已完成了多少个。那要看我数组里边有多少个数据,有多少个数据被勾选了对不对,所以说我这块写上一个count,那我有多少个数据,或者说多少个数据被勾了,都会影响到我的count数据,所以说这个抗我们可以把它写成一个计算属性。逗号,Set up。Return回来一个对象。好,这是一个count,我需要count。Cost Co count,注意啊,这块我们用的是一个计算属性。当然里边直接传入一个回调,就是get的操作,那我这个当中需要引入comp。啊,这里边写什么。我应该是直接返回,返回什么东西呢。返回的应该是我当前props当中,我没有props在这传一个啊props,因为通过props可以拿到数组嘛,那就是pros todo里边的这个数组,数组的什么呢?数组的点re duc reduce。
03:06
我要计算计算什么?我要计算里边有多少个数据,哪些数据是被选中的。对不对,所以说啊,这块我计算,那我用的是reduce逗号零里边传入一个p re,传入一个todo逗号,再传一个index,好,这里边做什么事情,无非用P加上括号,当前问todo里边的这个is completed,它是不是,如果是true给它移一个,否则就是零。当然reduce方法如果不熟悉的同学可以回头之后去查那个MDN啊,那这个PI就是一个什么呢?累加器默认值是零,只要有一个不选中的好,这个选中的值是几个呢?一个一个放在P1里边,因为P1默认是零嘛,零加一就是一,如果又来一个选中的好,那这块还有一个,那我就是原来一加一变成二。格式化保存。当然这边也需要我们保存。此时我们打开这个界面,看一下效果。
04:01
刷新一下啊。好,我们来看一共三个,已完成几个呢?再点一下,再点一下是不是搞定了,哎,这个是有问题。如果说上边三个都被选中了,那我这块应该是全选也被选中了。当然如果上面有一个勾勾掉了。那这个勾也就没有了,对不对,现在这种情况应该是下边这个勾被勾上,应该是全选状态,当然了,我如果用鼠标点一下,他们应该是全选,我再点一下没有勾了,这些勾应该也都没有了,对不对?所以说这应该是一个读取和设置的一个操作,我们也可以把这个东西变成一个计算属性。好,那么我们来看啊。在我的福特组件当中。这个位置。有一个什么呢?有一个input,它的tap是check box,我可以在这个位置再来一个V-model,等于来一个什么呢?简单一点,那我就写上一个叫a heck check out。它也可以变成一个计算属性。放在这来,那上边这个我解释一下啊,这个是已完成的计算属性操作,那下边这个位置再来一个啊,这个是什么呢?全选。
05:11
或者是全不选的什么计算属性操作。打过来高等于注意com po TD computerut能设置也能读取,所以说应该是个对象,里边应该有get。还应该有什么呢?在。Get是什么?注意反回来的,就是说这个a check到a checkout,它到底是true还是false,那应该看什么?想一想,那应该看我当前的这个count的value,注意啊,Count是一个ref类型的对象,它的value是否大于零。已完成的个数应该大于零个,并且啊并且怎么的呢。并且我当前的pros里边的这个土DOS数组。
06:03
它的什么呢?它的这个点length。得等等等等于我当前的这个count点什么呢?Y流,换句话来讲,已完成的个数在哪啊?已完成的个数和我全部的个数是相同的,并且已完成的个数应该大于零,这样才有意义。好,这个搞定了,那sat呢?什么意思?注意看啊。当我用鼠标去点击这个附险框的时候,要么就勾上,要么就没勾上,勾或者没勾都会影响我数组里边的这些数据他们的选中状态对不对?所以说在我伏特组件里边要操作我负极组件当中数据还是这个操作。我们还是应该回到APP组件里边,APP组件里边有这个数组,我应该有一个方法来专门操作数组里边所有的数据,它们是否都变成处,是否都变成false的这么一个方法,所以说接下来咱们的这个方法来看一下啊。这个应该是全选,或者是什么选不选的方法。
07:04
那就来一个comes check all。那里边儿穿什么?我们想一下全选或者全部选,你应该告诉我。我所有的数据可以进行遍历,遍历的时候要么你给我个处,要么你给我个false,就可以让他们全选,或者全部选对不对,所以说我这个位置可以来什么呢?As a completed。当然,它应该是一个什么类型或类型。对不对,那我这里边做的事情是什么呢?无非就是便利数组呗,好,那就是state里边的土DOS当中进行一个for一时操作。啊,里边的每个数据都是一个图度,每个图do做什么事情,每个todo的is completed都应该等于我传进来的这个波类型的值。是不是就搞定了吧,但是这个方法。也得扔出去,这样呢,在我的福特组件里边要去用冒号,它等于它。
08:03
咱们就搞定了,搞定了之后咱们再回到什么呢?福特组件里边,咱们再看一下。回到我的复特组件,好,我的复特组件里边做什么事情,在set当中我做的事情。首先啊,这个位置忘了一件事情,我是不是应该先去接收啊,拿过来拆高。这个对象。Type应该是f fun t类型的,同时re e qqu应该也给它一个处。对不对,好,那我这个位置就可以这么写了,Props点里边的什么呢。Check out这个方法,当它去调用时候,把我这个VL的值给他,VL的值里边存的就是什么,我点变成数,再点变成false,存的就是这个值。好,现在这一步咱们就搞定了,格式化一下保存。APP这边也格式化一下保存。打开这个界面怎么刷新?去看啊,点点勾选了,再点再点再点没问题,再点再点没问题。
09:03
比如我全选了。注意啊,我点它删除。也没有问题。再刷新一下。好,这个问题就搞定了啊。
我来说两句