00:00
下面我们来研究下一个技术,叫计算属性。计算属性呢?它需要依赖某些贝塔数据才能计算生成一个新值。我们一起来看。我们来写一个新的页面。叫demon three demo3创建啊,在DEMO3中我们去完成我们想的操作。来。开发的时候呢,我们会遇到这样的一个产品啊,在购物车页面,我们可能有一些商品,对吧,它的一个单价数量,然后呢,我们可能要做一些其他事一起来看啊,比如说我这里有个负的例子。有个食品电表。I第一,然后呢,它的na,我们就叫title吧,标题啊叫。苹果啊,我随便选了一个它的一个食品啊,然后呢,它的一个价格price为单价呢,我们就三块钱。
01:03
然后number的话呢,是它的一个数量,数量的话呢,我们为两个大概是这样的。标题价格数量对吧?我们可以来几份。来ID2,那么第二个呢,我们就相交吧。香蕉,那么价格的话呢,我们就一块钱啊,数量呢为三。最后呢,我们来一个叫菠萝。价格呢,我们贵点五块啊,然后呢,数量呢,我们一个好了,接下来呢,我们想便利展示这些数据,注意这里我们还没用上,嗯,咱们的这些。计算属性啊,目前我们用的是最基本的,我们来V-for啊,要D展示呢,用上指定V-for遍历这个for的例子。
02:04
编界的元素呢,记得添加一个唯一的key属性,好,这时候呢,我们发现啊,如果我们并不需要用上它的一个下标的话,那么编辑的时候就不用写那个indexa,直接写这个食品就好了,好key的话呢,就用负的点ID。然后里面我们展示啊。它的一个名称是负的,点抬头。他这个价格。负的点twice,我们后面加个圆啊,代表它是多少多少钱嘛,然后最后数量。我们呢,就负点number。然后后面我们加个个啊,代表它的一个。一个数量。好了,那么现在呢,我们就遍地展示成功了,接下来呢,我们只要把它展页面展示一下即可看到效果。我们打开这个工具啊,现在呢,我们要将conityl调到这个DEMO3,那么它才会渲染这个DEMO3的内容保存,然后在右键增加更新一下。
03:07
好了,此时他就会渲染苹果三块两个啊,香蕉一块三个,菠萝五块一个,那么这个时候呢,我们最后一个需求就是我们希望在下面计算总价,对吧?你买了这么多东西,到底总价为多少,所以我们想去做一下啊总价。那么总价怎么算呢?总价是这个每一个商品的单价乘以数量,然后累加起来,这个就是总价了。那么这个时候,诶,我们呢,拿到这个负的例子,没办法直接得到总价,这个总价呢,是要做一些操作,做些计算才能得到,此时就可以用上我们的计算属性。来计算属性的叫的啊计算属性。计算属性就是咱们的一些数据呢,不能直接展示,需要参与计算才能展示的话呢,我们就会考虑用计算属性。
04:05
不是不能啊,直接展示得不到,得不到结果。需要计算后。才能展示,那么可以使用计算属性。好了,那么我们来定义啊,比如说总价的话呢,我们叫total price。计算结果呢,就是我们要依赖某些data塔数据啊,计算属性呢,它一定会依赖一个或者多个data数据的。我们呢,只需要用上咱们的这个计算,然后呢,第一个是一定要依赖一些数据,第二个是必须要有返回值。必要方式计算属性呢就是一个函数,这个函数呢,就是这个属性的读取的方法。
05:03
整个函数就是当你计算属性,就是一个属性,叫total price,当你读取total price的值的时候,它就会调用这个函数,然后函数的返回值就是属性的值。读取计算属性,它就会调用函数。返回值就是计算属性的值。所以我们必须有返回值,这样计算属性才有值,没有返回值,计算属性就没值,就没有意义了。好,那么我要参与计算的话呢,我们这时候就可以去thisc,点这个for this。这时候我们要进行累加操作啊,累加操作就可以用上数组的一个方法叫reduce进行累加。reduce方法呢接收两个参数,第一个是一个函数,这个函数就跟负一值一样,你数组有几项元素,这个函数就会掉几次好第二个元素呢,是一个初始值,我们要计算生成一个价格,初始值就是零。
06:14
好,那么reduce方法里面呢,其实有四个函数,什么PC。Current。然后呢,还有这个index和。四个字。这四个属性呢,分别代表previous。对吧,代表上一次函数的返回值。初始化值为零,初始值零是因为我们这里定义的零,所以它的初始值为零,如果我们初始值这里写的一,它的初始值就是一,这个初值不是固定的,而是看我们第二参数。对吧?上一次函数就是以第一次的它值为零,那么当你调用完这个函数之后,它有返回值,那么下次调用函数的时候,Previous就是上一次函数的返回值。
07:09
看啊,就是当前变立项的元素。就是下标,就是整个数组。变绿元素的下标A就是整个数组。但是一般来讲,我们后面两个用不上,一般只用上前两个。所以通常我们前两个呢,会简写为P和C。那么我们return就是previous加上加什么呢?当前元素的价格乘以当前元素的这个单单啊数量,单价乘数量就是总价,然后把总价和上次结果每次累加,最终就会返回一个总,总的一个结果,那么总的计算属性我们就可以在这里展示了。
08:03
对吧,哎,其实只要用一个括号就好了,两个括号还费劲啊。然后括号里面这两个空格,加不加都行啊,只是我喜欢加不加也OK,像下面这样不加也是没问题的,下面我们来看。总价呢是14元,我们看是不是三二就是二三得六六加三就是九九加五就是14,对吧,那么总价就计算完成完成了,所以这就是计算属性啊,它呢,当我们需要显示一个数据的时候,但是这个数据不能直接用data进行展示,而是要做一些操作或做一些计算才能展示,那么这个时候我们就要考虑用计算属性。那么如果你学过view的话呢,就知道计算属性呢,有两种写法,有读有写的写法,但是咱们这个am框架中呢,只实现了只读的计算属性,所以没有第二种方式了。它只有这种写法计算属性,写法是一个函数,但是它本身是一个属性,当你读取这个属性的时候,实际上它读取的是整个函数。
09:06
而你在访问这个计算属性的时候,也不用什么this点的这个属性啊,而是直接this点这个属性就好了。好了,以上呢就是计算属性,语法定义在comp的里面,那么就叫计算属性,它会依赖某某些贝塔数据参与计算,返回一个新的值,那么新值我们会在页面中进行展示,那么这就是计算属性。
我来说两句