day05/上午/093-尚硅谷-尚融宝-计算属性的setter和getter

那这个地方呢，我们还是新创建一个文件。新建文件，然后我们还是把DEMO这里面的内容呢，给它复制一下，放到这个文件里面来。接下来呢，我们呃来写啊这样的一个例子，什么例子呢？就是有的时候我们在。网上填写一些信息的时候，比如说你写你的姓名，他要求你写你的姓名，你写一个姓吧，然后再写一个姓，再写一个名哈名，然后他就自动把那姓名就计算出来，是不是啊兔子啊好，然后这块呢，我们嗯写一个V-model啊，然后这块呢，我们写first name，注意啊大家啊，这个也是很多同学经常会遇到的一个问题，就是在这个地方写了一个v model之后呢，然后我们来预览一下页面。

就会发现呢，这个页面就会报错啊，为什么会报错呢？因为凡是你写在v model里面的内容，注意啊，一定在我们的要么就计算属性当中，要么就是data数据模型当中，你必须得事先定义，如果不事先定义的话，那他肯定报错呀啊所以有的同学呢，就写的热火朝天，把这个页面写好了，结果一运行报错发现呢，其实是在script里面呢，忘记把这个数据模型定义上了啊，所以一定要定义啊firstname，然后firstname这块呢，比如说老师写一个hele，然后接下来呢，Last name再写一个啊摇吧，好，然后接下来呢，在这个地方我们再写一个音。Put，然后呢，还是写一个we model，然后呢，等于last name。

好，然后这个是因为我的这个，呃，开发工具的那个什么，他给我展示到一行，嗯，我想想不太好看。我加一个B，看他能不能给我展示，因为我有那个自动格式化嘛，所以他就给我展示到一行了，然后我们加一个BR啊，然后让它在两行展示，这样的话，这面看起来呢也舒服一点，然后页面上看起来也也这个规矩一点好，然后呢，这样的话呢，我们就把这个HTML代码写好了，写好了之后呢，我们想着在下面这个位置呢，嗯。有一个。就是展示一个全名啊，展示一个全名，所以呢，我在这个位置，我比如说写的副name好，但是这个全名呢，我希望是它自动给我计算出来的，对不对，我自己加一下，嗯，多词语句，嗯，Firstname也有了，Lastname也有了，它可以自动计算好，然后呢，怎么去展示这个全名呢？这个大家可能就嗯。

这样写副内蒙。是吧，嗯，然后接下来呢，这个负name怎么展示，那它一定是需要被计算出来的，所以呢，我们就想，哎，这个负name如果是被计算出来的，那它的计算方式是什么？肯定就是first name加last name中间加空格嘛，那么所以呢，我就得给这个负name呢，有有一个具体的值呢，它要有个运算过程，那运算怎么运算，这个地方我们只能写一个，呃，就是这个变变量的定义，一个值的定义，不能写一个具体的代码，不能写一个具体的运算过程，那怎么办？那这个东西你就得写在计算属性里，对吧？好，所以下面这个地方呢，我们就加上一个分母。P，好，然后呢，我们把附name呢放在这儿啊，因为我们知道这附内要经过运算嘛，所以肯定是要有方法对吧，没有代码，没有这个方法体没有办法写预算，所以呢，在这个地方我们就可以发挥了，那么就可以写return this.first name，然后加上再加上。

this.last name是吧？啊，所以这块呢是pencil.log叫计算属性啊。负负内计算属性好，用这种方式呢，我们来展示并且计算这个负内，然后呢，接下来呢，我们来看一看在我们的页面当中，这个腹内全名能不能展示出来，这个再写个BB。好，然后这块呢是全名。好，这样的话呢，就展示出来了，但是前面第一个是on是啥意思，就没定义啊，没定义的话，那就是first her name对吧？啊就可以了。

我看一下是不是又写错first first nameme对吧，这样写啊，所以你看这种就是肯定就是字符写错了嘛，啊这个就很好解决，叫Helen摇对吧，哪个是first。First name first内行好，然后接下来呢，这个就是我们整个的这样的一个计算属性的应用，然后呢，我们呢，想用它也做一个双向数据绑定的功能，所以呢，在这地方呢，我再写一个input文本框，嗯。好再写一个音，然后这个音input呢，我写一个叫。嗯。V model吧，V-model，然后呢，我想把这个name呢放进来，看看能不能实现双向数据绑定，我们说正常情况下，我们data当中定义的这个数据模型，如果写在这个v model里面，它都可以实现一个双向数据绑定，对吧？啊那所以我们来看一下。

先看这个从这面往往这个腹内绑啊，这都是没问题的，对吧？啊，你去改这个当前的这个姓也好，名也好，它都能够影响到我们的，呃，这个副内膜，也就是说它这个计算属性呢，你每一次去改变计算属性相关的这个数据源的时候，计算属性的这个方法呢，都会被重新计算，然后从而呢，在这个地方呢，就显示我们的内容了，但是大家看当我们去修改。负name的这个文本框当中的值的时候啊，你看我改一下，你看这地方是不是就报错了，我从来给大家演示啊，我修改这个下面这个文本框文本值，好，你看这是不是就报错了，他说什么呢？他说。

他说，计算属性name was assigned to。But it has no center，诶什么意思？他说这个计算属性，这个full name呢？它正在被赋值，也就是说这个地方呢，你试图修改这个计算属性的值，但是因为计算属性没有这个cier set和geter，我们在Java当中知道这个概念是不是啊，就是呃，给这个属性赋值和取值用的啊，好，那么是封装这个属性用的对吧？啊，所以在前端当中你会发现也有这个概念，它说因为你这个附name呀，没有塞，所以呢，我没有办法给你这个负name呢，真正的去赋值，好我们来看这面啊，View这。刷新一下还是那么如果我在上面输入内容的话，你会发现这个内容会跟着变啊，这都跟着变，但是如果我在这块输入内容，比如333，你会发现这个内容变了吗。

是不是没有跟着它变呀，说明什么，就说明他没有塞，没办法通过这个文本框给你的这个数据模型赋值，那怎么办，那好办呢，他都告诉你了，没有set，你填一个set就可以了，明白吧？啊所以我们接下来要讲的就是怎么样去填筛查。那么怎么去填塞呢？我们来看一下啊，我们如果默认情况下是这样去定义我们的计算属性的话，那么这个呢，其实相当于我们的geter啊，这个相当于我们的get，就是它只是取值用的，你看这里面不有个return嘛，所以他只是负责啊通过数据源，然后计算一个值，然后把我们的计算属性的值拿到获取到，所以这个呢，相当于get取值，那我们怎么样给这个full name再加上一个设置值呢？这样的一个功能加上一个S呢？这个时候呢，我们就需要分别的去写get和比如说父NAME2，我们再写另外一个计算属性啊，再起一个别的名字。

然后呢，因为你这个里面呢，得分别写get和sat，所以呢，附name本身呢，它就不能是一个方法了，它得写两个方法，一个是一个是get，所以这块呢，我们就用冒号的形式，然后这面呢，写一个get方法，这个就是我们所说的get。这个get的方法呢，就是和原来这个一样，因为如果你这样写的话，它默认就有get方法，好这就是我们附NAME2的get方法，然后接下来我们再写一个set方法，好S的方法呢，它接收一个值，这个值呢，就是你从交互文本框当中输入的这个值，会呢，从这个Y6呢，给它获取回来啊，所以这个呢是save方法所方法这块，Set方法这块呢，我们can.log然后呢，把这个啊输入的值是是什么呢？是Y6是吧，我们先来看一看能不能去。

动态的去调用这个set啊，那怎么去做呢，我们在。我们的页面当中。我们在我们的页面当中再复制一份啊。好，然后接下来呢，这个地方呢，我们给它改成二。改成二，好，然后接下来呢，我们来看在下面这个第二个文本框当中，我们输入一个不一样的内容，大家看这回是不是不报错了，而且是不是把我们输入的值获取出来了，输入的值是不是啊，把我们输入的值已经获取出来，获取出来之后就说明他其实已经成功的进入到了刚才我们写的这个赛的方法当中吧，那么在赛的方法当中，我们是不是就可以为所欲为了，就是你想干嘛都行啊，那我想做什么？我想把我输入的这个新的first name和last name，我再绑定回我原来的这个数据模型当中，就做一个反向的绑定，那这样的话呢，我们可以先把Y6啊，给它拆分一下，比如说嗯，Y6。

Y6.4多late通过什么来拆呢？注意通过空格来拆啊，因为我们前面呢是通过空格把它组装到一起的，所以这块呢，你通过空格来拆，拆完了之后呢，我们把它放到一个比如说names里面啊，因为后期其实这个names我们也不想去改变它了，所以呢，你也可以把它定义成cost啊都可以好，然后接下来呢，我们呢，this.first name就等于。

这个names里面的第零个元素啊，然后接下来呢，this.last name就等于这个names里面的第一个元素，这样的话呢，我们就通过拆分我们输入的这个值，并且把每一部分的内容呢，放到我们的第一个元素啊，Firstname还有lastname当中啊，反向的呢，就把这个数据绑到绑回来了啊，所以我们来看一下。那这个地方我们呢，就这样写，比如说APP对吧，你看这不是返回来了嘛，这面是AAA对吧，返回来了，当然了，这块我们写的比较简单啊，如果你你随便写的话，恐怕就会出现一些问题，什么问题啊，就是你会发现，因为它就是就是什么，就是要split这个一个空格嘛，啊，所以你输入的名字里面如果没有空格的话，可能这面就是逻辑就有点儿不太好处理了，就有点混乱了，所以呢，我们这个例子就比较简单，我们就不猜，不再去深入的解决一些用户输入的一些个性化的问题了，好，我们就解决一下我们怎么样去。

这个啊，这种情况就是中间有一个空格的情况啊，如果中间没空格的话，你会发现它是吧，它强制给你加一个空格过来是吧？啊好，这是我们的get和set方法，也是我们的附name里面的啊，一个固定的两个方法啊，注意这个是个关键字啊，当取值的时候，它自动调用代的方法，当负值的时候它自动调用S的方法，好。