00:00
大家好,我是学轩园地的特约讲师高若峰,上节课咱们学了绑定属性,使用微棒以及它的缩写语法堂的方式,冒号的方式,以及上上节课我们学的差值这样的方式,那有了差值的方式和属性绑定的方式,咱们现在就可以将一些动态的数据放到我们的模板里面去了,那放模动态数据放模板就是这样的一种方式,那只不过我们在使用的时候,像这种差值的方式,我们除了在里边直接放变量,我们还可以有一些简单的表达式在这里边使用,那绑定的方法呢,属性可以用在所有的属性上,但是我们常用的属性有三种,就是有意义的属性,像src啊,啊title啊,还有用呃h iff啊这样的属性,我们通常从接口里把数据拿过来,动态绑定到标签元素上,用它去显示,那更有意义的操作呢,像比如说我们经常页面的特效,因为它是声明式的嘛,所以呢,比如加类,让这个类添加这个类和删除这个类,那我们通过这个类的方式前面加冒号我们就可以绑定了,还有处理一些单个样式的时候,我们也可以加。
01:00
比如说我们一些呃,头像的话,我们一般的情况下都是用背景来做,那我们就可以用这种方式,比如说加一个动态的一个用户的背景图像,因为用户的头像都是在数据库里存着的,通过接口给我们的,我们拿到接口啊,通过这个设置用户的头像,每个人头像的那个照片是平衡的,对不对。那不管是class方式还是方式,那他们基本上都有什么字符串的用法,数组用法啊,对象用法和方法用法,大家再练习一下啊,那特别是class的时候,它和style那对象用写的是不一样的,那style对象的用法呢,是里边就是介质,对对吧,跟原有属性是一样的,而class的对象里边用法,记得它是布尔型,只要是布尔型是真值,那么就留在这个元素上,将这个类,如果尔是假值,就相当于去掉这个类,所以呢,通过加类和减少这个类,那我们就能做出一些通过样式控制的特效了。那这节课呢,我们再学习一个新的知识,结合这个属性和呃差值,我们来学习一下,叫做计算属性。那计算属性是干嘛用的,也就是我们说了,在写页面的时候,尽量让我们的业务逻辑,逻辑的代码就是用嗯,GS写的这些代码,对吧,处理的动态数据这些逻辑,把复杂的逻辑呢,不要在我们模板里边去直接去写,而模板里面直接我们就放一个变量就可以了。
02:14
直接就放一个变量,这是最简单的,里边也不用判断,也不用什么,用最少的语法去写,这样的话,我们要让我们展示和逻辑是完全分开的,这是我们比较提倡的一个代码的一个写法,那计算属性呢,就能帮我们处理什么一些复杂的逻辑是很有用的。那我们看一下,简单举一例,看一下什么是呃计算属性,那我已经把原来的例子是保存了一份,然后又复制了一下DEMO啊验收过来,这样你比如说我现在想在页面里边,我把这个去掉,假如说我现在想显示我的一个呃标题,那标题呢,通常有比如说有网站的一个名称内幕组成的。假如说这是学习。原地name和我的slogan组成的,S log slogan组成的,那我这块叫做成就自己,只需一套精品。
03:07
那比如说由这两个组成的啊,组成我们的一个什么,组成我们的一个一个标题,那如果我们这块用H1,比如说我们用H,嗯。这块啊,假如说我们用H1做标题的话,H也行,那H2做标题吧,那我们通常的写法,假如说我们不用计算属性,这比较简单的啊,我们先就只是举个例子,那我们需要这样去写,用两个差值这样的一个方式,比如说内,然后呢,中间我们连接一个杠线这种方式,然后这里边写上slogan。你看使用这种方式,学员的成立这几套进体对不对,或者是我们在一个变量里边去写,这样去写,然后我们用加号的方式,中间加一个字符串,一个杠线,用这种方式去写两种,两种方式对不对?都可以实现,但是你别觉得这样的话,我们写起来就比较复杂嘛,对吧,相当于有一些逻辑在这里边,哪怕连接符啊,这些东西也算是一个逻辑,这不复杂,那我们有一种很好的解解决办法,如果我们不学计算属性的话,那我们怎么解决呢?我们可以在这里边声明一个方法,比如说我们叫做get title,得到标题。
04:13
这样的一个,呃,生明一个方法,在这里边我们只要返回这里边name加上一个杠线,然后再加上这里边的,比如说slogan基因,你看啊,我们返回,然后我们在这里边调用一下这个方法,因为在差值里边也是可以调用方法的,对吧?调用方法在事件里可以调用对吧?绑定的属性里可以调用,那在这个差值里边也是可以调用方法的,Get开头你看要用这个方法加括号。你看是这样的,不加括号呢,你看他就把这个方法都拿过来,对不对,所以这块呢,一定是加括号调用方法的方式,能把我们这种呃标题取过来,这是第三种取的方式,那你看变得也很简单了,对不对,那现在我想变成什么呢?我想用什么,我想用一个很方便的一个方式,什么方式呢,我就想这块显示一个标题。那我说了在这显示标题,那我直接在这块写一个,呃介值不就完了吗?写一个title不就可以了吗?你看t title对不对?那你想下我的数据获取两遍,那数据库里边,如果这个数据从数据里边获取来的,那名称和lo,那我需要在这怎么着,数据表里边有可能再存一个对不对,或者我写接口的时候再组合对吧,也比较麻烦,但是不是不行啊,那有另外一种方法,计算属性,就是帮我们去合并,这样也属于一个业务处理,这个业务处理呢,那我们写的计算属性里边计算属性。
05:28
看好我们options这里边传的像这样的名字啊,Date方法,还有这个对象,这都是固定的,这都是固定写法,对加因为咱们前面是office斯的时候说了,咱解暂时用这个,那计算属性给我们提供另外一个名称也是固定的啊,这里的名称方法名称你是自己随便定义的,但是呢,这外层的选项名建构值,如果你随便定义VE啊,VE model就V,它找不到的,对吧?所以我们使用com computer,你看它属于它是一个什么计算的意思。计算的意思,Computer是计算机嘛,Computer对吧,计算的意思这块不要加了,加上逗号,这加计算,然后呢,我们这块里边,这不也阶层格式嘛,也是一个间值段,那我们说明一个开头的一个属性里边是一个对象,也是一个阶层的格式,对吧?在阶格式里边,我们这里边起固定名叫盖的方法,就获取值,那这个盖的方法看就跟我们这里边声明的方法其实是差不多的,那我直接返回这个。
06:24
你看直接返回这个他俩是一样的内容,那我现在在使用的时候,你看计算属性,这里边直接一个属性开头,这个属性就跟这里边上面的属性差不多的,只不过你看我是把多个属性合到一起了,形成一个属性,而不是在这写的,这块是你不能说再去调用方法的,去弄这块直接是声明对不对,这块就是一个date的一个数据,别的什么也不用,你看我现在再直接写开头,我现在保存一下这块就直接有了第四个成就,自己只需要二进去,那这块我可以比如说换个井号看出来一下。你看就行了,那这块不是调用方法,不是调用方法,记住啊,不是调用方法,而我们这个位置。
07:01
是调用方法,那说这有什么区别呀,对吧。雕用方法也不是那么麻烦的,因为我们这里边用到的全是属性调用方法,感觉用的逻辑,其实它俩区别还不光是在这个位置上,还不光是在这个位置,在什么呢?咱们说了这个计算属性它是有缓存的作用的,什么缓存作用的,比如说我在这里边。嗯,我打开控制台。清除一下我在这里边,我们呃,输出一下,比如说输出一个字符号吧,嗯,一行1.log。输出一个这个,然后呢,我在这个位置。这个位置要调用12345,调用五次标题对吧。有五次,现在六次了吧,没关系,五六次,那我在这块你看,呃,输出一行二。点。你看啊,然后呢,我在这块。调用这个方法调用一两三次,也是调用五次吧,看一下调几次,这肯定打印几次了,对不对,有几号这个的区别,但是你看一下这个二被打印了多少次,掉一次被打印次,而我们这个一只打印了一次。
08:08
的。为什么只打印了一次呢?因为它有缓存的作用,这个计算属性会认为说只要是你这两个值没有变化。只要是你这两个值没有变化,那么它计算完之后,这个值就会缓存起来,相当于我们用一个判断,但一刷新的话肯定还会变化,就是在当前页面内存里边去缓存的,对吧?去缓存了一下,而不像这个每次都重新调动一次,如果这逻辑很复杂,有大量的循环,那每次这样循环都会执行一次,而计算属性是不需要的,计算属性是不需要有大量的循环,那些操作,因为它只计算一次,对吧,获取结果,那当我们这个值有变化了,当我们这个值有变化了,当然了。你要有变化才会去再调调用的,如果有变化肯定是再去调用的,当然我们用程序去操作这样的变化,或者动态的变化,如果不变化的话是不需要的。所以它俩有这样的一个区别,另外使用的时候,你看我们就像属性一样,不用加括号去处理,那加括号行不行呢。
09:04
你看加括号下边就错误了,对不对,加括号就错误了,所以呢,用这个那格式呢,就是这个是固定的声明计算属性,然后里边呢,你想使用什么属性就加什么属性,想使用什么属性加什么属性,然后呢,把其他的属性通过业务逻辑啊合并也好或者也好,把它放到一起,是这样的,那当然这里边除了在的在的方法,那我假如说重新有没有一个给它重新赋值呢,重新改变它值的方式呢。如果用程序改变title头的值呢?有没有呢?其实也有改变title头的值,那改变title头的值的时候,其实我们抬头本身是不变,它不是在这里边生为个固定属性,它相当于是组合后的一个属性,对不对?那我们改变它值,其实目的就是改变这两个值,其实就改变这两个值,那其实我们在这个对象里边还有一个方法叫什么呢?叫做S。但是用的几率很小很小,基本上都用不到。因为我们你可以用程序直接改成这两值,对不对,一样的。它会变化对不对,干嘛非得去改变title,通过title再去改变这样值呢,对吧?这种操作的情况是不多,但是给我们提供了一个这样的一个一个功能,一个功能一个值,那我们给它设置值的时候,那我们是一个完整字块,我们也需要通过业务逻辑分别赋给这两个值,你比如说我们呃来生明一个数值,因为它传过来的多个值,我们传个值,比如传我们就把假如把这个速度。
10:20
对吧。当然用这个我斯内保密保存的,你看通过v lus这个数组SPLLT分割对吧,按空格分割,那分割成。对吧,直接用这个,你看S的方法,当后他这个是用老师方法啊,咱们是用E6的增向对吧,那个新值用这个分割空割分割分割速度,然后把第一个值给他,第二个给他是一样的,对吧,就是这样的方式,这个就不写你显示了,因为用的平的很少,理不理解这个都可以啊,假假设吧,你写一下,如说用那个杠线前面两个空格用这个分割,对,假如我们还传这个值,然后呢,就是给这里边,这次里边内等于数组里边的分割出来的第零个值,对吧,然后这次里边的slogan slo给上我们的什么第二个值arr里边吧。
11:10
嗯,二一下标对应的是第二值,怎么曲线,这样的话,我们在程序里边,比如说我们开头这样可以取值吗?那我们假如说有一个事件或者什么方法,我们假如说在这里边给它重新移调对方案,重新设置值的时候,假如说使用这里边title PI对吧?Title赋值的时候,那这里边我们可以复制学习原地对吧?然后我们空格,这个在空格正好再加上slogan s SL是SL。ROO,那我们这样在赋值的时候,它就会把这个值干嘛呀,把这个值给我们上面复制掉,你看我们现在在这里边,因为这方法肯定会掉很多次,掉的时候赋值对吧,绝缘剂和上面就放开去12去了,在别的方法里边其实是这个作用,但是用的不多,用的不多。就不是这个后边这个对不对。
12:01
就可以了。这就是我们的什么?计算属性,把一些逻辑拿过来,那有的说这个,那还没看明白怎么用,那我再给你写个这个,我就在这个例子基础上,下面再写一个,比如说呃,我们把上面这个。不知道。是不是掉,那我在这块再写一个,假如说我现在需要一个总价,那也就是我们在这个里面。在这个里边我们需要一个假如说一个购物车,我们集团购物车的一个购买商品的总价,比如说打折之后啊,或者什么的那个价钱,对吧?接着咱们再讲数据,那里边什么啊,还有过滤啊,还有map啊,这三个方法的时候,对吧?咱们讲过类似于这样的购物车,那我就证明一个,比如这里边会有一个books,所有的书,那这一个数据里边对应的是每一本书,比如说有ID,有是第一本书,然后。嗯,那个名字叫做。比如说叫做细说PP。第一版对吧,第一版当时出的价钱。
13:02
十几年前出的。总是书房一资料啊,价钱假如说是。79第一把,然后。第二版。第二版。108第三版。138。现在是158。第四版。假如说购物车里你把这四本书都买了,谢谢支持啊,希望大家能买最后一版就行了啊,这四本书那我想知道总价对吧,那正常我们如果不用计算属性的话,像总价的话。那我们通常是这样,当然你也可以通过便利一个一个去去加to,呃,总价totl啊PI这样加对的总价这块。
14:04
嗯,我们加上一个S。加一个高。50美元啊,不是人民币。这块变小一些,然后呢,我们这块加上一个价格,如果咱们不用。这个的话,那就是里边的第一本书对不对,里边的价格PI,然后加上这里边的。啊。当然你可以用循环啊。第二本书加上。加上第三本书。在标二的,然后再加上。第四本书。你看这样的话,我们一样可以买四本书,知道这个总价是多少。有错误翻译啊。价前面定义price。
15:01
啊,里边的。那么书里边。书这块是box找到的就是这个这个数组。啊,属性属性呢,它是个数组,数组零里边的点P没问题。没找到啊,这块第四本书应该下标为三,下标为三,你再看一下。你看价钱是这个,但是这里边儿呢,给我们都是写的,都是字串的,当然你在成序里边可以把它转换,你看我们计算数在这里边转换,你得一个一个调方法也不好转换对不对,那如果我们用计算属性的话,那你想怎么转换自动券怎么转换都可以了,你的总价是这个对吧,这种方式是比较麻烦的,那我们复制一下。啊,我们这块换一个行,第二,然后我们把这个给它换掉,我们直接做一个变量。做一个变量。
16:00
使用什么啊,Total总价P加上这个,但是这个变量我们有吗?现在还没有这个价格对不对,那我们在计算属性里边,我们加一个tot总价加上这个里边呢,我们只要做一个什么方法就行了,做一个get方法。就可以了,在这里边我们直接返回所有的这样的一个价格,那这里边我们返回可以用循环去便利,对不对,你可以去便利,那我们这里边也可以用循环去便利啊。这里边也是可以的,就是我们用V杠什么的去去做,但那也比较麻烦,但是逻辑不在这里边写,逻辑呢,在程序里边写对不对,那这里边加一个在计算属性里边又加了一个总数的一个属性,假如说这里边我直接返回111,那你看这里边直就直接是111对不对。那肯定不这么做,怎么做呢?我们用什么?这里边的book是不是能找到,不是这个是样books book它是不是一个数组,这个数组里边我们是不是有个reduce,咱们学过这个方法对不对,那这里边再加上一个。
17:05
多到参数那个箭头函数,这里边第一个就是一个参数S一个总和吧,对吧,第一次是零,然后第二次是两个相加之后返回给他的,那这里边儿我们再加一个元素的一个参数,我们叫X吧。随便写两个参数。然后这里边我们没。返回什么,或者是如果直接一个值直接一个值,那我们就可以用什么要S加等于。当然一个值我们也不一定用这个,呃,括号对不对,S加等于。这样的一个方式。不是S加等于N,因为它本身第一个就是那个和对吧,和再加上里边的元素对吧,不是S加X啊,那这块咱们通常用SN的比较多,你看SN这样的话,我们再刷新一下。和等于,也就这次里边不把不里边的。
18:04
嗯。里边每一个元素。拿过来这个里边N是这里边的每一个元素,每一个元素是把里边这个对象拿过来了,这个对象里边的PCE也把这个放进来啊。然后他是一个对象。那怎么没拿过来?咱们再回顾一下reduce里边S呢是呃,默认是零啊,这个默认的是零给加上去得用第二参数把零传给他对不对,然后S代表第二次,在执行第二次的时候,把这两个价钱相加,零和对价相加,再返回给谁,再返回给这个S,第三次加S,这应该就没问题了,放心下,诶483对吧。啊,用这个方法直接计算,不然的话你写个循环对吧,就可以了。你看这样的话,我们计算属性通过这个方式直接拿到这个是不是就变得很简单,直接我们加一个总价就行了,比上面这种方式要好多了,那我们数据比如说用户被添加购物车再多一个商品,你比如在这块你再多几个商品对吧,那一样这个价钱能算出来,在上面这块呢,我们还没有,但是上面是静态写的,你如果用循环的话,也是可以对单就会出来了,那总数也可以对应的上。
19:13
啊,这就是我们这节课给大家介绍的什么模板里面的计算属性。不难,对吧,如果你需要把多个属性的值合并在一起去应用,或者是需要,不能说不能光理解成说把数据连接在一起用,也就是把数据需要处理之后再显示。对吧,就不要在模板里边去写,写一个属性,把计算的过程放到计算属性里边去,然后呢,这会在模板里边只放结果是这样的一个过程,那语法呢,也很简单,S方法基本上不用,对吧,用的都是get,你想如果用S赋值不如直接赋值了。对吧,很少用,但是有有可能有用的情况啊,但一般都用不到啊,谢谢大家。
我来说两句