00:00
好嘞,各位,那在这一小节呢,我们给大家讲一下,就是view当中啊,如何对一个已知的列表呢,进行一个过滤,诶同学说老师我还是没听明白你要讲什么啊,回到课件当中,咱看一下图啊,你就懂了,这个各位,哎,仔细看啊,在这儿呢,其实是有一个搜索框的,你可以在这儿呢输入人的名字,比如说你输入了一个冬天的冬,那么下方的列表啊,就会发生变化,周杰伦和温兆伦这条数据就没了,留下来的就是马冬梅和周冬雨,因为他们的名字里面都包含冬天的这个冬,OK,哎,其实就是一个模糊搜索这种功能啊,在开发当中特别常见,大家想一下,你比如说你打开淘宝的时候啊,你点了一下我的所有订单,在这儿呢,可能给你罗列了很多的订单,对吧,然后你想搜索呢,你所购买的这个跟鞋相关的订单,你在这儿是不是可能搜索一个关键词,比如说叫做鞋,然后下边所展示的这个列表啊,就发生变化了,都是跟鞋相关的对吧,什么休闲皮鞋,运动鞋啥的对吧?哎,这是很常见的,然后呢,同学我把这个名字呀,也都改了一下,你看不叫什么张三李四王老。
01:00
苦了啊,我变成什么了呢?马冬梅周冬雨这些东西说老师你可真无聊,是这样的啊,我有我的设计,各位马冬梅周冬雨是不是都有东,周冬雨,周杰伦是不是都有周,周杰伦,温兆伦是不是都有伦,哎,可能有一些这个年龄小的同学呢,不知道这个温兆伦是吧,也是一个很帅气的一个男明星啊好,我这么做只有一个目的,就是一会儿让你搜索东西的时候,你输入一些词,比如说输入一个周,不至于它只出现一条数据,对吧?想体现出来是一个过滤这么一个效果,OK,那同学你看看啊,我一共有这么多东西,根据你的输入,我就把我这100多条数据啊,假设我有很多,最终呢,筛选出来六条给你看,这不就是一种过滤吗?啊好了,回到代码中呢,咱写一写这样啊各位,这个第二个里面我们写了太多的总结和操作,哎,所以说这个呢,我关掉啊,不在这个基础上进行复制,我在一的基础上给它复制一份,然后名字呢,给它改一下编号是第三个了啊,叫做列表的过滤啊,改一下名。好,然后把名字呢,给它复制一份,把这个网页的名字给它改一下,然后所有这些东西就开始精简了,删啊,还有就是这儿测试这个便利对象的删啊,测试便利字符串的删啊,还有便利指定次数的这块也删啊,走走,然后里边这些呢也删一下,汽车的数据不要了啊,字符串也不要了,就留一个persons就够了,然后呢,接下来开始改名对吧?那这样我再删一删啊这块呢,别写这个便利数组了,大家都知道便利的是数组对吧?这行注释那给它干掉好了,来,那改一下吧啊这块叫做马冬梅啊,这块呢叫做周冬雨是吧?好,那这块呢叫做周杰伦对吧?再来一条,这块呢叫做温兆伦,好,然后这块呢也得换一下ID啊,这是四这块,别忘了这个小逗号啊,年龄都改一下啊,随便写啊,19,这是20,这是21啊,这是22,然后在我的列表里呢,其实还有人的这个性别是吧,咱在这儿呢,就给它加上吧,走走走走,再来一个性别好,那比如。
02:59
比如说马冬梅是一个女士啊,周冬雨也是女士,那这块写一个男,那这块呢写一个男好了,那我便历的时候就得多展示一个数据了,对吧?是P点性别就可以了,右键打开先瞧一下效果啊好,OK,那控制台呢也打开刷新一下,没啥错误啊,接下来呢,那赶紧的吧,是不是在这儿先写一个input框啊好来开始在HR的下方啊写个input,然后在这里呢,写一个place holder啊叫做请输入名字,哎,同学,我做的是一个模糊搜索啊,可不是说那个精准的这个匹配说只有输入马冬梅三个字才能出现这马冬梅,你输入马冬梅这三个字里的任何一个都可以啊,这就不磨叽了,各位好,那同学接下来呢是这样,你觉得这个功能应该怎么做,你别一直听我讲是吧,你琢磨琢磨。
03:48
其实一共就是两步,各位你想想啊,第一步你是不是得拿到用户的输入,同学,用户输入的是什么,你都拿不到,你谈什么过滤啊,对吧,第一步获取用户输入,你说第二步干嘛呢。
04:01
拿到了用户的输入之后,我问你各位是不是在这个列表里面就进行过滤就得了啊,比如说用户输入的是轮,那你就把这两个给他展示出来是不是就可以了呀?诶所以说一共就是两步,那我们先完成第一步就是收集用户所输入的数据,那问题是怎么收集呢?啊同学我问一下啊,我呢输入了一个码。那你是不是得收集到这个码,那我把这个码删掉之后,我要换成别的,比如说写了一个州,你是不是也得收集到,也就是说各位这里边的东西随着你的输入就得被V给收集到,你说对吧,你首先得拿到用户的输入吗?哎,那用什么呢?这会儿呢,就直接跟大家说啊,你应该能记得叫做V-model对吗?是不是一个双向的绑定啊,哎,页面上的输入诶能够回流到VU当中的数据里面,是不是好,那咱就写一下啊,那截止到目前呢,我的view u实例里面没保存别的,就是保存了四个人对吧?Persons,那回到这儿你知道怎么写了啊,在上方给他来一个啊回车叫做keyword可以吧,你你当然叫name也行啊各位,但是我想的还是说keyword能标准一点,关键词吗?一上来有吗?没有用户啥也没输入呢,那就是空字符串位,好那这会你知道怎么写了,我写一个v model,诶然后写成什么呢?这个keyword对吧?好,你读v model和v model其实也都行啊好了回来。
05:22
看一下啊,走一上来没有东西,哎,那我开始输入了,比如说输入一个马冬梅的马,对吧?好了,接下来我把它删掉,哎,那就是梅,哎,那我输入一个老刘的流走,你看这是不是也有,OK,这就可以了,同学,第一步呢,你完成了叫做收集用户的输入,那么第二步是不是拿着用户所输入的东西进行匹配呀,同学你听我说,这个案例最标准的写法应该用计算属性去写。但是呢,同学,我如果说强行的用计算属性去写,你也能听懂,但是我觉得啊,站在一个初学者的角度,你未必在最开始就能把事情看得这么透,同学我引导你一步啊,现在啊,你输入的这个关键词已经拿到了,现在你要做一件事,各位就是拿着这个关键词是不是到这个数组里面去进行过滤去。
06:12
啊,你先别着急写,同学,你再往下再思考一步,你说如果有一天我把这硫啊给它删了,变成了王,那我问各位,你是不是得重新拿着这个王再去进行过滤啊,那也就意味着各位,我这过滤啊,他不是一锤子买卖,不是说我过滤一次以后就不过滤了,你觉得呢,各位,那你说什么时候会过滤呢?你跟着我一步一步来,什么时候会过滤呢?同学一句话,当用户所输入的关键词发生变化的时候,我就得重新过滤,你说对吗?那我再引导你一波,我怎么能知道用户所输入的这个keyword它变了呢?我通过什么渠道能够得知他变了呢?哎,同学,那你说你就马上会想到谁呢?Watch,你说呢,各位,哎,所以说我先拿watch呢写,同学,你记不记得咱之前说过一句话,我说comp的这个计算属性能实现的,Watch都能实现,那所以说同学我先拿watch写一遍,我再拿计算属性写一遍,然后你形成一个对比,好吧,不墨迹来同学watch开写走,既然用watch,那你咋办?是不是得配置一个watch那个配置项啊,你要写在这你可错了,我告诉你,你写个watch,哎,之前在线下讲就有同学练习的时候哈,晚上就说,哎,老师,我这不好用啊,同学,你观察一下,你是不是把watch写在data里了,哎,Watch和data呀,是平级的,OK,各位,你把data折叠起来,在这敲个回车,在这写这watch就可以了,它飘红的原因是这你没有补上这小逗号,对不好了,同学,监是谁呀?监视keyword,那就把它拿过来。
07:44
那关键点又来了,各位大家都知道啊,这个监视是有两种写法的,一个是完整的写法,就是keyword后边写一个配置对象,然后里边写什么这个handler之类的,对吧?那还有一种写法呢,就比较简单,Keyword直接就写成一个函数,对不?各位。
08:00
说老师,那你看我也不知道用哪个呀,同学是这样啊,刚开始的时候你本着这个原则,就是怎么简单我怎么写啊,那同学你想想,你一上来就用简单的写法,如果最后功能能实现的是不是更好了呀,但是你写着写着,如果简单的写法你写不下去了,你自然而然是不是就变成那个完整版的写法了呀,所以说刚开始吧,我觉得是这样,各位你不用花费大量的时间去记什么时候我用哪个,而是多敲多练,你觉得呢,你敲多了,自然而然你形成一个套路,你就知道,诶之前敲过好几遍了,那种场景,那个东西不行,回头他怎么怎么地,对不OK,同学现在在这我用简单的,我就直接写成一函数可以吧,它能收到什么参数了,一个是A,一个是BA叫做new value b叫做old的value,但是我们也不去关注它O的Y流是啥,你说对不来回到页面,各位,你比如说你之前的搜索的是马,你现在把这码换了,你比如说你换成流了,各位你说我用关心你原来那是啥吗?不用,所以说我不需要那个刑残B,就用这个A,但用A不太好,我叫VL可以吧,然后在这儿呢,我做一个输出,首先测试一下你的监视好不好用,如。
09:00
果这个keyword发生改变了,我就输出这么一个东西,叫做keyword被改了,然后再输出什么呢?Val它到底的值是多少?来,那我们看一下啊,回到控制台,为啥没输出啊,因为你没改嘛,对吧?同学监视监视,你得改人家才能监视到,对吗?好了,同学,那我自己敲吧,别复制了啊,有没有东西到我输入一个码,是不是一个改变,看我N3被改了,是马,那如果再继续输入呢?我输入东对吧,始终能拿到你最新的输入值,OK,同学,来吧,回来你知道这怎么办了,别做这种无聊的事儿在这输出,请问怎么办?用户输入的东西你拿到了呀,然后怎么办呢?各位是不是得回到这个数组里面进行一个过滤啊,首先第一步各位你是不是得this.person4是不是拿到这个数组,然后怎么办呀,是不是得过滤呀?同学,数组里的东西有很多,我只想要符合条件的数据,那你就得用谁呢?肯定得想到用这个人呗,是不是filter是不是过滤呀,对吧?过滤掉我不想要的嘛,留下我想要的嘛,对吧?好,那走,那接下来就看你基本功了,就看看你对数组身上的方法呀,熟不熟了,同学这个呢,咱就不墨迹啊,拿到是什么呢?是一个P这个形态P是啥呀?是不是每一个人的对象啊哎,那接下来同学filter里面我是不是得写return return什么,Return后边是不是跟上过滤的条件。
10:19
那我这么写啥意思?p.H大于19,我这么写啥意思,那就是把所有年龄大于19的人咋的是过滤掉还是过滤出来,对吧?是过滤出来啊瑞后边写的是你要的这个条件对不对?写的是匹配的条件对不对?哎,好,但是我玩的不是年龄啊,我玩的什么呢?p.name然后它这个name里面是否包含包含啥,包含我这边的Val,我这是伪代码啊,不能执行呢,就说这逻辑对不对?名字里面包含啥v al的,但是你得把它变成正常能执行的代码啊同学,你得用哪个呢?判断一个字符串里面是否包含指定的字符,你得用index of对吗?啊,是否包含谁呀,你这边的Val。
11:04
那问题又来了,就看你对这个东西它熟不熟悉了,来各位咱写点简单的测试啊,你比如说有一个字符串呢,是这个ABC对吧?然后我想问你的是这个字符串里边啊,包不包含字母X,你说包含吗?不包含不包含,它的返回值就是负一,那我再问你包不包含A呀,包含,如果包含的话,它就会把这个字符在第几位给你,你比如说零是啥意思,哥们儿零可不是这意思呀,啊说零转成布尔值是false,它就不包含哥们儿零是代表A在第一位。如果你再问他说包不包含C各位,他也是包含的,在第几位,第二位同学,我这不想再墨迹了啊,那基础好一点的小伙伴听我这课就太墨迹了各位是吧?哎,所以说同学什么叫匹配上了,只要不等于负一,我问你是不是就算这里边有这词啊,那怎么办呢?咱得这么写了,叫做不等于啥呀,负一对吧,你这个表达式最终是不是能形成一个布尔值啊,OK啊,那我问一下写到这儿就行了吗?
12:00
你琢磨琢磨。说老师好像挺对的呀,我这边一改就拿到这个值啊,然后这个数组啊,我就过滤啊,哎,同学又看你基本功了,请问filter更不更改原数组。就比如说啊,我有一个数组,里边有这么几个字啊,12345678,哎,这么几个数字,然后呢,我的要求是请你用filter把这里边所有的偶数过滤出来,那你得用什么呢?是不filter?我想问的是过滤完了之后,这个数组受不受到影响?答案是不受到影响,因为filter会给你返回一个全新的数组,那数组长什么样呢?里边包含着2468 OK,同学,基本功,所以说你这么折腾完了,咱就这说吧,红色框里的代码折腾完了,人家给了你一个新数组,然而这个新数组你却没有用,那你说这个数据它怎么能影响页面的变化呢?对吧?所以说在这儿呢,同学你别忘了还得有这一步,This点谁PERSON4是不是等于这个?你想想,拿着persons过滤出来的新数组重新交给persons,那我问你persons是不是变了,PERSONS1变,诶,我问你是不是重新解析模板,那你说整个列表是不是就发生变化了呀?好,来,那我们瞧一瞧啊,各位回到这儿啊,没输入呢是吧?
13:12
哎,那我输入一下注意了啊,看着现在是有毛病的啊,你看着我输入这个周冬雨和马冬梅的冬啊,注意。你看哎,说老师这啥毛病啊,这不挺好的吗?瞧着各位啊,我再把这东啊给他换成马冬梅的马老师,这不也挺好的吗?那你看着啊,我在输入周,你注意了,周没了,啥都没了,为什么?其实非常好解释,各位你瞧一下啊,打开V的开发者工具,我问你现在有几个人四个。啊,分别叫什么名儿呢?都在这儿呢,你看着,当我去搜索这个东的时候,你注意观察啊,同学,我问的是页面上为什么会出现两个人?本质原因是你的person确实变成了只有两个人的数组,你说对吗?那同学我想问你,你知道吗?搜索一下子不要紧,你把谁都搞丢了,周杰伦和温兆伦你搞丢了,而且同学这两个数据再也回不来了,因为什么呀,在你过滤的这个时候就把他们给丢掉了,你把过滤出来的新数组交给person了,同学你觉没觉得你这么写的逻辑就是越搜索越少啊是不?那你看这块打开。
14:17
打开你要再搜索这码,你看着越搜索越少,你看对吧,你再搜索一个不存在的,你搜一个理费了全都没了,各位,那你说这问题怎么处理呢?不管你怎么处理,有一个固定不变的原则,就是persons是原数据,原数据请您不要直接修改,直接修改了你就回不去了,当然你的需求如果是这样的,说这个列表啊,就是越搜索越少,OK,同学,写到这儿你写完了,但是基本上不会存在这种奇葩的需求,所以说各位你觉不觉得person思这里边所保存的四个人根本不能变,你得把一个别的地方还去给他变一变是不?所以说同学你仔细考虑这个小案例里边呢,还是有一些逻辑的,对吧?各位接下来请问怎么办?那写不下去了,哎,那我说一下啊,各位你呢,可以去这么写啊,可以去这么写persons,既然不能动,哎,我这么写,各位,我在这个属性里啊,我写一个这个东西叫做persons,啥意思?Persons呢,是原有的这一堆人,那这个few persons呢,这个feel呢,其实我取的就是filter的前三个字母,我的意思是红色框里的是原数据啊,我不能去改,那这个绿色框里的东西呢,还是这边怎么办?过滤出来的东西,诶,我给它塞到这个里面去,对不对?拿着红色的原数据进行过滤,过滤出来的新数组交给绿色的fair personsons,这不就可以了吗?是吧?哎,那你这会儿就得改一下了,This点谁persons,那我问各位啊,你说上边你便历的时候还能用这persons吗?
15:46
同学,你在这如果还用这个persons,那就这样吧,你把下边这些红色的逻辑你就全删了吧,你辛辛苦苦维护的persons你是不是没用啊?所以说各位把它复制这边咋写,是不是得写成five persons,这不就可以了吗?是吧,各位啊,你捋一捋是不是那么回事好。
16:05
来,那我们看一下效果啊,走,哎呀,东西没了咋回事。打开看一下各位,原数据是不是在这儿呢?嗯,四条,哎,我问一下各位这块是不是空数组啊,那你一上来你看你的代码,你便利的这个fair person是不是为空啊。这数组为空,人家不给你展示任何数据,这没毛病吧?哎,那这怎么办呀?有些同学就说了,哎,老师简单呀,我可会了,就把这一堆人复制一份,往这再一写,同学啊,我只能这么说,你要这样写吧,你真无敌了,确实功能实现了,你看一下啊,这是原数据,这是上来呢,你准备好的这个,呃,Five persons对吧,以后保存着过滤的那个数据,那你看一下,现在确实是这效果,你看马冬梅周冬雨,你点开你怎么看?Persons吧,这persons吧,来搜索一下周冬雨的东,这俩是不是出来,把这东呢换成周,各位是不是能出来。可以能实现,但是各位你这么写啊,你看看你代码是不是有点不太对呀,同学还真能这么写吗?就是再来一个,哎,不是这样的,说老师那怎么办呢?哎,咱这样慢慢来,各位我呢先把这块删掉,就让它是空数组,说老师那这里没东西啊,同学没东西,他肯定是没东西,但是我想问的是现在我能不能搜,我能不能搜。
17:21
现在你的逻辑其实是能走下去的,只不过这个视觉效果有点不太好,哥,各位你说对吧,就是我都不知道有几个人完了,我就在这傻傻的搜索,对不,同学能不能搜?能你看着我搜索马冬梅的马。能不能出来马冬梅,那我把这个马呢,给它换成东,能不能也能对吧?各位,那你想想搜索是可以正常完成的,就是唯独有一个缺点,一上来是不是没东西啊,各位我们捋顺一下啊,现在没有数据,我输入了一个马冬梅的马,为啥有东西,那你想的同学什么东西都没有,然后呢,变为这个码,你说是不是一种改变,只要是一种改变,我问你watch里的keyword这个函数是不是执行,一执行我问你这红色框就过滤了,过滤完了我问你是不是给fair persons了,我问你fair person,哎,有没有值,是不是就有值了,那有值了,那都是你想要的,那不就展示了吗?哎,各位,这里面其实有一个挺有意思的点啊。
18:12
你说现在我把这马删掉,我问你这列表是什么样的。现在不有码吗?我按那个删除键,我把这个码删掉,然后我问你下边这个列表什么样的,说老师那分析呗,啊,现在是码,嗯,你把这码删掉了,你就当你输入的是一个空字符串对不对,啥也没输入嘛,空字符串嘛,啊朱老师啊,由马变成空字符串,这是一种改变,那我就拿着空字符串,哎,这是一个空字符串,那我就开始去过滤呗,那问题就是。我想问的是马冬梅,周冬雨,周杰伦,就这些名字里面,我要问你包不包含冬,你能告诉我老师前两个包含,后两个不包含,现在我问你的是马冬梅、周冬雨,就这些字符串里面,这些名字里面包不包含空字符串?我告诉你是包含的啥意思呢?你看着啊,同学先给你看效果吧,我把马删掉,整个列表都出来了,整个列表都出来的原因是这样的,各位,比如说有一个字符串,它是abcde,然后现在呢,我问你这个里边呢,包不包含字母D,它肯定是包含的,并且告诉你0123是第三位,那现在我问你这里边包不包含空字符串,你可看好了,各位他说零。
19:23
对吧?哎,我再问你包不包含A,他也说零,这是一个特别关键的点,各位,一个字符串里面index of,一个空的字符串是零不是负一,哎,所以说这就能解释的通了,各位,那你看原来这个Val是几啊,是马,那现在是几啊,是不是变成了一个空串啊,那空串来这一过绿同学,那什么马冬梅,周冬雨,周杰伦这些人是不是都算包含这空串啊,那你说这个feel person是不是就有值了,并且是不是他们四个呀?OK,那你看列表就是这么一个效果刷新一下啊,一上来是没有,你随便输入一个东西,一是不是没有匹配,你再把这一删掉,列表是不是出来了。
20:01
哎,说老师那就这样吧,我在这儿呢,给他加一个小提示啊,说请你随便输入一个东西,再删掉这个列表就出来了,那你不开玩笑的吗?哎,所以说各位啊,在这儿有解决办法,你听我说怎么解决呢?接下来啊,你不要把这个监视呢,写成一个简写形式,你把这监视啊,你听我的写成一个完整的形式,然后你把你那个handler啊,给它正常写在这对吧,原来的函数不就是作为handle的这个函数体吗?加一个词就好了,同学还记得它吗?叫immediate,然后是车,OK,同学搞定了,一加不要紧,各位是不是这个东西不等你去改变的时候,他就已经掉了一次这个hander啊,那已经掉了一次,我问你一上来用户啥也没有输入,那我问你这块是不是有个空串,那空串是不是都匹配呀,所以说各位功能实现完毕,来瞧一下效果,一刷新把这个也打开啊,是不是原数据。这来这块,那这个是不是过滤出来的数据对吧?那为什么一上来就有呢?因为您加了一个immediate,那加了immediate我什么也没输入啊,没输入就是空串,空串就是里边都包含feel persons就有值了,你瞧瞧是吧,好了,接下来呢,我输入马冬梅的马,OK,那输入他的东看周冬雨和这个啊,那再输入一个这个周是吧?哎,测试一下周对吧,那我输入礼呢,没有这个人,那当然就匹配不上了呗,对吧,删掉,你看这不就实现了吗?好各位,这是我用什么实现呀,我用数据监视去实现对吗?各位好了,快速的我把这个东西用计算属性再给你实现一下,为了不让这些代码啊来来回回干扰,我在这写一个注释啊,叫做用watch实现,然后你看着我把这一堆东西复制一份,然后全都注掉,然后在这儿呢,给它折叠起来,然后在下方同学我再写一个注释走,叫做用computed,然后怎么的呢实现。
21:50
好了,开始写代码,还得写这个new view版,但是这儿呢,有一个很烦人的这么一个地方啊,各位就是Vs code的呀,我不知道你们遇没遇见过啊,就是当你想把一大段折叠起来的时候,如果你下边不写代码了,其实它是可以折叠的,但是你下方但凡你写了一点代码,你比如说你有一个view,你看他不让你折了,说老师你再点一下,你发现点不了了啊,可以用怎么一个方式去解决呢?可以这么写啊,各位你在前边来一个井号叫做region啊,然后在你想折叠的这段代码的最下方,再给他来一个井号叫做under region好,这代表开始折叠,诶这会呢,折叠完毕,那这回同学不管你这个代码怎么写,诶,这都能折了,对吧,比较方便。好了,我还是得创建一个比U实例,那不自己写了,用快捷键啊V1,那这里边呢,我写一下啊,还是得把这些东西拿过来是吧,那我就直接复制过来吧,一点一点写,太浪费时间了,把它复制啊这块的折叠,把这一堆呢给它拿过来,好慢慢来,同学watch咋的,哎,就不写了啊,那这个fair persons诶也不写了,回到最初始的这个原点啊,好接。
22:50
接下来怎么做呢?瞧了各位data里面配置的呢,都叫做属性,接下来我用这个叫做computed,里边配置的是个计算属性,好,那我计算出来那个属性叫什么名呢?各位还叫做fire person思用心体会,那问题又来了,Fire personsons是计算属性,计算属性各位是不是有两种写法,第一种写法是写一个完整的配置对象,那第二种写法是不是还是写一个简单的这个函数啊,那我用哪个呢?对吧?咱说先优先使用简单的好走,那问题是里边的逻辑我怎么写?
23:21
里边的逻辑怎么写是吧?来想想同学是不是还是匹配呀?啊,那同学你想想我是不是得拿着这一堆person丝计算出来这个five persons到底是多少啊,我要这样写,你告诉我是啥意思吧,Return,然后呢,我返回一个数组,然后我把这个马冬梅放进去,你说我这么写的后果是什么呢?这么写的后果就是各位无论你怎么去这个过滤,你最终生成的那一堆人,我问你里边是不是始终是马冬梅对吧?咱大概看一下效果啊,你打开走。你看马冬梅,无论你怎么输入,各位,你看因为它固定返回的就是马冬梅吗?哎,那我不能返回这个,那我得返回啥呀,我得返回这个东西真正过滤的结果,你说对吗?那怎么写this.person4,哎,PERSON4,然后点是不是filter,那里边的逻辑,我想问各位跟之前是不是都是一样的呀?哎,所以说拿过来把这些东西给它复制,然后呢,往这儿给它折叠一下,好,那这一堆呢,给它粘过来。
24:20
走,咱之前说过这个计算属性同学,计算属性是靠返回值决定东西的,你说对吗?你看啊,this.persons filter啊,拿到这个P了,然后看这里边点name是否包含,哎,注意了各位,你说这我得咋写,你还有这V吗?你没有。同学你要注意的是啊,计算属性这块才能收到什么新的value,什么旧的value对吧,你这块啊监视的时候对吧?哎,监视的时候这个handle里面是有这个什么新的value旧的value,但是同学你的计算属性这块可不是啊说老师那完了,那我拿不到用户所输入的东西了呀,各位。可以啊,咋写?哎呀,this.keyword是不是就可以了?拿没拿到这不就拿到了吗?对吧?然后不等于负一的,那我问你各位,红色框这一堆执行完了,一个新数组是不是出现了,你要把这个新数组的值作为谁的值,Person的值,那你想把它作为fair persons,你得怎么写呢?各位是不是return?
25:20
这个return是filter规定的,要返回一个过滤的条件,那这个return呢,是计算属性规定的,你不返回值,我怎么知道你的persons是啥呀?对吧?OK,好了说老师这就写完了,对,你打开看一下啊,各位走马冬梅周冬雨,首先初始化列表是不是正常,输入东正常吧,好,把东呢改成周正常不也正常?说老师,那这怎么个流程呢?很简单呀,各位打开VIVO的开发者工具,刷新一波来走各位你看啊,Person丝,这叫属性,这是不是计算属性?同学,我想问的是你这个计算属性里面依赖了谁?计算属性里面你依赖了蓝色的关键词,而且我们之前还说过一句话,就是计算属性这个回调函数两个时候调用,第一个时候是一上来的时候就帮你调一下,第二个时候是什么?就是计算的时候所依赖的数据发生变化。同学,你觉没觉得我绿色框里这么写,最大的优势就是keyword怎么变,我不用去监视,我就告诉你keyword要参与计算fair persons就可以了,以后只要您的KEYWORD1变,我问各位你整个fair persons是不是重新执行,那重新一执行,我问你各位是不是就拿到了一个最新的值啊?诶同学,那你瞧瞧呗,这是用什么实现?计算属性实现,那你打开这,这是用什么实现呀?Watch实现,那我想问各位,你说哪个更好一点呢?很明显这个麻烦一点,这个咋的?哎,是不是精简一点啊,那那就是咱说的,当computed和watch都能实现的时候,我们优先使用谁呢?Computed。
26:51
好,那这小节呢,我们停。
我来说两句