00:00
来,我们接下来看下一个功能啊。那下一个功能是这样的啊,当我用鼠标点击某一个数据前边这个复选框的时候,它可以选中,再点一下它这个选中效果就没有了。然后呢,咱们怎么做呢,来看一下啊,咱们这个现在看起来好像也有这个效果,但是由于现在是VIEW3啊,当前这个view的插件在浏览器里边是用不了的,所以说呢,咱们没办法看到它真实的这个数据是怎么样子的,实际上啊是这个样子的,我们来看啊。当我们在item当中。找到这个input的标签啊,Check box的时候,我们会发现V-model里边绑定的是当前这个对象的is complete的这么一个属性。然后呢,这个属性反回来是一个处。但是呢,当我用鼠标直接点击复选框的时候啊,注意返回处它会选中,当我直接点击复选框的时候,点它它变成false,等于什么呢?我在子这个子集组件当中直接修改了负极组件当中这个数据对象里边的这个属性。这种操作呢,一般情况下咱们是不允许的,应该是我的负极组件,让你自己组件里边修改,那么你才能修改,所以说啊,咱们把这块改一下,不用它了。
01:08
注意啊,这个V-model里边绑定的数据应该有两种操作,第一种如果里边是true或者false,直接可以在复选框当中显示这个选中或者说不选中的效果,那这是属于什么呢?从当前的某一个属性当中读取出来触和false,然后呢,给了这个复选框,它才有这种效果。另外一种操作是什么呢?当我鼠标点它的时候去设置或者说修改这个复选框状态。啊,所以说它应该是一读一写的操作,我们把这个位置的数据呢,变成一个计算属性的方式来做,啊,那这块我们就写成一个什么呢,叫做ACO。吧,Is complete,好,然后呢,那这是一个表达式,表达式的值,你可以设置它的值,也可以读取它的值,现在呢,这个数据从哪来呢?没有啊是吧,我要用,那我应该从这个return对象里边反出来。那现在啊,注意这个数据里边读取出来,如果是处,那我就应该在这个位置让他去选中,如果读取出来出来的是false,那么它就不选中,那么如果说我要是点复框。
02:09
那么让他选中的话,那么当前这个数据就应该变成什么呢?变成true的效果是不是,所以说应该是可读可写,而且。最终在页面里边显示他勾选的状态的情况下啊,显示他勾选的这个状态的时候,应该是从我的负极组件当中。这个to DOS数组里边找到某一个对象,对象里边这个数据是true还是false,才能够读取出来,放到这个位置去显示。那也就是说。我的APP组件当中,这个数组当中,对象里边的这个属性的数据。它变化了,那我当前复选框的状态也会跟着变化。啊,所以说呢,咱们这个位置应该用计算属性的方式来做。来看一下啊。我这边有这么一个数据。然后呢,在这儿。这个应该是计算属性的这个方式啊,然后干嘛呢,设置或者。
03:02
呃,读取啊,不是应该是计算属性的方式来干嘛呢?呃。让当前的复选框选中,当然或者说它也有这个什么呢,不选中。好,那我来一个cost把它拿过来啊,等于com computed,注意啊,这computed咱们在上边需要引入。在这个位置,COD。拿到计算属性之后,注意啊,将来这个数据可读可写,所以说这个comp里边应该给他写个什么呢。对象。里边应该有get的操作,还应该有set的操作,对不对。好,那下边这里边该怎么写呢。我们来看一下。最终我应该是把某一个对象,这个对象是todo,这个对象当中的it complete的属性读取出来,放到这个位置,让它变成选中或者不选中状态。所以说我在这个位置应该直接返回什么,通过props当中找到我的todo。
04:07
然后呢,点里边的is is completed,把它的值直接返回,那我这块有没有todo呢?我们要看一看,这边我们接触过了,接触过所以说可以直接使用没有问题,好。如果当有人去点那个负选框的时候,等于在设置负向框对吧,所以说来让当前负选框选中或者不选中,是通过计算属性方式来做啊,在这块应该怎么写。呃,如果说我在这个位置去设置复眼框选中,那设置它选中或者不选中是对于todo这个对象的操作对象中。对象中的什么呢?Is cold这个属性进行操作,而这个土do对象是从我的负极组件传到list组件,再传到item组件当中来的。对不对,那我这个对象当中的这个is complete的属性的数据要想发生变化的话,应该是在我APP组件里边做的一个操作,所以说我需要在我当前的这个APP组件里边做一件事情,或者写一个方法。
05:13
这个方法专门去搞定某个todo,它的is complete的属性之处还是false,所以说现在在这个位置啊,这个是修改todo的状态。修改todo的什么呢?Is complete。属性的状态,哎,那我应该再来一个cost,那我这块就写上一个什么方法呢,来一个updt。Update todo这么一个方法。好,那你需要给我传什么呢?给我传入todo,当然它应该是todo就行了,还应该给我传入一个什么呢?Is complete这样的一个属性。而且它是一个布类型。对不对,然后当你调用这个方法的时候,我就把这个todo的什么呢?Is complete这个属性变成传进来的is completed这个值就可以了。
06:09
好搞定,那我现在有这么一个方法了,而这个方法在哪用。是在我的item组件当中去用,所以说我应该在当中反出去。回到我的绿色组件里边,在这传递过去,强制数据绑定的方式传递过来。然后我的历次的组件这边需要接收一下。接收完了之后再传给什么呢?当前的item组件。格式化下啊,然后我的item组件这边需要再次干嘛接收一下。他的菜。TYP。应该是方式类型对不对,好,然后呢,逗号re e Qu。I应该也是一个处。快搞定了,那现在来看啊,我是不是可以在这个位置。
07:01
直接这样做,通过props这个属性。点这个什么呢?Up todo这个方法调用,调用完了之后,我需要在里边传的什么,传入的是一个todo的这么一个对象。并且再把我当前的这个触和false的值给它传递进去不就可以了吗?所以说我在这个位置括号直接来一个pros.todo这个对象穿进去了,还有一个V啊。好格式化一下保存。当然我在我ABB组件这边啊。做件事情。cancel.log括号,当前的todo。刷新。就看当我去点它的时候,好,我们可以看一下啊,这个位置是处。再点一下这个位置是false,这就搞定了啊,注意啊,我们讲的这个问题在于什么?在于负极组件当中的数据,尽量不要让某些子集组件直接进行修改,而是负极组件当中数据。
08:00
干嘛放在一个方法里边,让自己组件去调用,你调用才能修改,你不调用就不能修改啊OK。
我来说两句