00:00
大家好,我是学习园地的特约讲师高洛峰,上节课我们学习了常用的组合式API有这么几个,那比较常用的呢,有前三个,那作用呢,就不再重复了,咱们会一直应用,那这节课呢,我们再来接触一个新的API计算属性,那计算属性呢,和我们前边学过的计算属性应用的场景是一样的,那只不过在这里边,在我们组合式API里边的写法是不一样的,来,我们一样学一个新的知识点,那我们就建一个新的页面,新建一个。嗯,组件我们叫做嗯,Com PU TED计算属性。演示吧,加DEMO那个那个原来的聪明在这里边,然后我们需要在呃路由这里边加一条路由规则。加一条路由规则括号直接搬过来。然后我们路径咱们就叫做ED,然后嗯,这里边我们就写上这个组件comp e,然后DDEMO,那我们把这块也改掉。
01:02
对吧。然后我们需要在菜单的部分,也就是在APP里面,我们菜单向上加上。一个。这块我们这块改成。Comp TED,然后我们这块改成呃,计算属性。属性计算属性。当然了,我们把这个我们也拿过来。计算属性,那点击计算属性呢,当然这里边儿现在什么也没有,呃,这个我们就关掉,在这里边我们写上计算属性,用H1H1的1H项计算属性。好,就技能属性了,那我们现在看所有用到API肯定是需要一个入口,对吧,入口在哪呢?Setup就咱们写很多次了,对吧,Setup里边在这里边。然后在这里边,我们假如说,嗯,做计算属性肯定得有一个应用,那我们就声明一个用户信息吧,一个呃,User host或者是light都可以啊,User里边等于如果我们想让这个用户信息是响应式的,Re啊。
02:13
Re。Relative,然后这里边儿通过这个API在这里边声明。那我们想用这API,一定得把这个API引入对不对,那我们mport引入relative re,然后然后从VE这着V小写引入这里边,然后我们声明一个用户信息,比如说啊用户信息,那我们就叫user也可以啊,叫什么名字,这个你自己定义,然后比如说我们l first name,我们叫做,呃,起一个名字,比如说叫做。然后全名。那我们这个因为是杰森里边是一定要逗号啊,Last name,我们叫做呃,PU这块。
03:01
这里边起了两个,一个用户名,一个。com,就随便起了两个变量,那如果我们想在页面里边应用这两个,那我们一定是return,对吧,返回去,返回去呢?那我们需要假如说我们直接用里边的名字,用什么呢?是不是再引入一个把我们的响应的数据在我们展开,对吧?相当于复制到这里边的时候,要保留显示数据,提供什么to re FS,所以把这一篇引入,然后点点点把它展开。嗯,To re FS,然后user,这样的话,我们在页面里边使用的时候就不用user.user内内。那我们这是上节课我们学的程序,那我们看一下这里边写上嗯,Firstname first nameme name,然后我们在这里边加上一个input。然后双向绑定VR model VR model Mo dl,绑定的时候直接绑定什么first name就可以了,然后换行。我们在last name绑定一个input,然后we model绑定last name就可以了,然后我们在页面上看能不能显示这两个名字。
04:11
这比如说一个是用差值first name,然后我连接个点对吧,当然在这里边你可以使用什么,使用加号对不对,连接个点对吧,然后再加号我们last name。这样的一个形式。第二。那。这样的话你看就可以出来了,那我们这块改成比如说点C,那么RK.c就可以要下边出现,对不对,这是我们上节课学的那计算属性,咱说了跟我们嗯,以前学的那个计算属性功能上是一样的,只是写法不一样,那假如说我们全名不想用这种组合的方式,我们想用一个名字对吧,比如说负name,假如说变成一个计算成一个这个属性。那计算成一个Z属性,我们怎么办呢?我们就可以在这里边。这块好像现在没有这个计算属性了,对不对,那你可以在这个里面加一个属性,但在这里边加一个属性呢,就破坏了原来对象的信息,对不对?所以计算属性呢,我们可以在外边去使用,比如说let声明一个什么生明一个for name等于对吧,等于一个,那我们就得使用一个API,组合式API帮我们完成积本属性,那什么呢?Co computer,使用这个积本属性,Comped。
05:23
通过他这个API帮我们来完成,那这个API里边我们需要一个回调方法,回调函数,那我们用镜头函数去帮我完成,那在这个里边它就能访问这里边的变量,然后呢,帮我们组合成一个普通的一个其他的一个变量,因为计算属性在我们程序开发中是经常使用到的,如果需要一些数据需要变形之后显示显示并且保留显示的话,我们就使用这种方式。那在这里边我们直接re什么呢?因为在这里边不能使用这次,所以呢,我们访问用户里的信息,在这里边访问,因为这出去是结构出去的,对不对,使用这种展开出去的,返回去的,那在这里边呢,我们使用还得是user点对吧,Firstname连接上,连接上一个点,我们再连接上user.last last last name,你看这样呢,我们才能够访问到这里边的数据,虽然是响应的数据,但在这里边我们一样可以访问这个点去掉只加好,这样才可以啊。
06:19
那这样可以数据我们说在这里边声明的任何一个变量计算属性计算的变量,对吧,因为我们写在不是这个对象里边,如果在对象里边直接展开就可以出去,对不对,那在这里边如果使用的话,我们就必须得怎么办,把这个直接也返回去内。你看下面就有了,那我们现在上面是我们自己把这两个在模板中写的,这是用计算属性给我们组合后的,那这里边比如说点com.C你看是一样的。一样可以使用的,另外呢,在我们这里边就不用受这个限制了,对不对,以前我们写的时候必须得放在哪啊,必须得放在什么cou这个里面对不对,然后里边写上呃属性,比如说。Name对吧,然后。这里边你可以加get方法之类的,对不对,或者是直接从内加括号的方式,这是以前的这样的写法都要写在这里边,那我们这里边就不用受它限制了,我们可以任意的去。
07:09
去写,那假如说你有多个基算属性一样是可以的,比如说这里边,呃,用户信息,我们再加一个年龄,累计年龄对吧?啊加一个年龄我们在上边,因为这块你现在是加年龄之后,比如说我们这块加上20对吧,年龄加20,那我们直接用这个结构已经直接出去了,对不对,直接出去了,我们在对象里加的时候,我们就不用一个一个给它返回了,那在这里边使用的时候,也不用对象那种形式法它返回了,那我们这块直接比如说输入一个年龄,我们判断这个年龄对吧,多大咱们判断它一个工龄吧。然后我们这块来一个input加一个这个。连在一起吧,年龄这块input,然后我们V啊v model,然后绑定,直接绑定这个年龄第二。然后这块我们输出这个年龄,输出这个年龄AG对吧,这块。
08:03
多少岁?多少岁?所打。岁啊,这个多少岁,然后后边我们加一一句话对吧,加一句话,比如说叫做呃显示吧,嗯,我们就叫显示这个年龄,我们就叫一个寿,计算出一个这个属性,但是这个属性我们现在还没有对不对,那我们就通过这个年龄的判断,现在是20岁,你看那是200岁,2000岁,对不对,这个用户信息多少岁了,然后怎么样,对吧,那你就可以在这里边随意的去判断了,那比如说我们来一个light受显示,等于Co ped,所有计算属性直接我们加一个API在这里边写就行了。你看那如果需要参数的话,那我们调用的时候呢,你可以在这加参数,一般我们都不用,那我们这块直接判断一下,如果user里边的AGE,假如说小于20岁,那我们这块就直接返回。
09:02
嗯,晚会。还啊,年轻。安静。这样,然后否则如果你得加很多个对不对,优点age,比如说小于40岁对吧,小青。嗯。小青年。然后再否则就是你这块直接呃返回。啊。岁数不小了。这样的话你看啊,我们现在在这里边输入一个,根据这个判断它的一个一个范围,然后数,但是这块我们想页面显示声明变量,我们就得在这块返回对吧,就可以了,你看20岁小于20岁,呃是小于等于20岁,你比如说我们这块,呃两岁对吧,还年轻对吧?那这块来个30岁小青年对吧,来个50岁,岁数不小了,是不是记载属性你可以写多个,那这写什么应用根据你具体情况去来,总之这里边这节课我们就学了,这是上节课学的两个API,这节课学的就是一个计算属性的API,作用跟我们以前学的计算属性是一样的,只是写法在这里边更灵活一样,你需要计算属性,就用这个API里边去计算你对象里边的属性就行了,当然有多个对象,你可以把多个对象结合,你想要什么结果,根据情况怎么计算。比我们。
10:35
传统的微友里边,呃,传统的这种计算属性要灵活的多,需要就写。当然也可以在这里边写,前面怎么演示的就可以,好谢大家,这节课我们就讲到这里。
我来说两句