00:00
好了各位,那在这一小节呢,咱们把刚才所写的这个列表过滤啊,给它升级一下啊,加一个功能叫做列表排序,回到课件中就是这个功能。页面上呢,有三个按钮啊,年龄升序,年龄降序和元顺序都是什么意思呢?说一下,当我点击了年龄升序,你就会发现啊,整个蓝色框里的列表呢,进行了一次重新的排序,并且排序的特点就是越往下这个人的年龄就越大。那最后一个人一定是列表中啊年纪最大的人,那同理,你点了年龄降序,就是最后一个人一定是什么呢?列表中年龄最小的那个人,那原顺序的意思就是不升也不降,OK,哎,这不就是排序吗?那值得你注意的是啊,同学,我所说的升序和降序都是指自上而下的,明白不?咱们看东西不都是嘛啊,从上往下看嘛,对吧?哎,这会儿就是跟大家说一下,来吧,咱写写吧,回到代码中,把这三的复制一份,名字呢给它改一下,编号是第四个了,哎,叫做列表不是过滤了,诶删掉叫做排序。好,那把这名字呢给它复制一份,把网页这title也给它改一下,好,那我就把刚才的那个过滤啊,用watch实现那个呀,我就删了,OK,最好的一定是用这个计算属性,那这行也删掉。
01:27
好,把那结构啊给它补上,叫做年龄升序,还有一个叫做降序,还有一个叫做元顺序,OK,打开瞧一下效果。诶,准备好了,这里呢,有一个细节上的问题我得跟大家说一下,就是我的过滤和我的排序是不分家的。舒老师,这我怎么理解呢?如果说你搜索过东,那么你手里的是马冬梅和周冬雨,当你点击年龄升序的时候,列表中是对这两个人进行声序,明白不就是,如果你要把这两个逻辑给他割裂开,那就是这么一回事儿,你看着各位,我是不是过滤出来所有带东字的了,然后等你一点年龄升序啊,哎,好家伙同学,什么周杰伦温兆伦都出来了,这是不对的,大家想想,我先搜索鞋,就看到了所有跟鞋相关的订单,那我可以把订单按照订单的金额进行一个排序,对吗?各位,一个正常的逻辑,它俩就是不割裂开的,它俩是连在一起的,OK,好啊,那来写写吧。同学,首先你是不是得知道用户到底想升序降序还是原顺序,对吧?你点击不同的按钮,你是不是得设置一个不同的标识。
02:48
啊,那我呢,是这么设计的啊各位,就是元顺序呢,我用数字零去代表啊,然后这个降序呢,用一去代表,那这升序呢,按照二去代表,对吧,你要不用这个,你用别的倒也行是吧?好了,那首要的一个任务就是我得知道用户到底点了什么,那以你目前的这个view实力,所收集的数据呢,你只有关键词对吧,是你收集过来的,你这persons不是一开始你自己写的吗?这个不是计算出来的嘛,所以说各位我在这儿呢,得设计一个属性去存储用户到底想升想降还是想云顺序,你说对吧?哎,那想个名字吧,哎,怎么写都行,你比如说叫做type类型,是不是可以或者写的完整一点,叫做sort type啥意思?Sort有排序的意思,排序类型呗,OK,那我用什么呢?我就用这个sortt type,哎,回到代码中,咱简单写一下,在这呢,再给他来一个啊,叫做salt type,然后呢。
03:48
零,但是你得写好注释啊,零代表元顺序,那么一代表什么来着,降序。好,那二代表什么来着,叫做升序好了,那接下来你的任务就是点击这三个按钮的时候,让它做一件事就可以了,就是把这个sort type呢,是不是进行一个修改啊,啊等于零,那降序事一,升序事二,当然这会是多余的是吧?给它删掉好了,完事,那接下来怎么办?
04:23
对吧,你知道它到底是升还是降,还是原顺序了,那接下来呢。嗯,想想同学我一直在强调啊,我说那个过滤和排序是不分家的,那也就意味着同学你过滤的逻辑已经写完了,你在这个过滤的逻辑之上,你再加一个啥就得了,是不是排序。啊,舒老师说吧,我都明白,但是一写我就不会啊,那琢磨琢磨吧,同学,这个fires是不是我模板中正在用的?也就是说各位,你这个列表之所以能出来,你离不开谁,离不开fire persons。
05:04
Fair persons过滤完了,那你的列表也过滤完了,因为列表是依赖它出来的吗?你只要把这个fair persons给他维护好,我问你各位,这个列表是不是就已经维护好了呀?一句话啊,同学,想过滤吗?那你把persons给它过滤好,想排序吗?那你就把few persons这个数组里的顺序给它整理好,是这意思不?哎,那所以说同学接下来就研究它吧,对吧,往下走。说老师这怎么办呢?听我说啊,各位,你不能着急的把他返回。你如果现在这么写的意思就是,哎,绿色框里这一堆是不去过滤,过滤完了各位你二话不说就把过滤的结果返回了,你返回不要紧,直接就作为persons的值了。我问一下你有机会去排序吗?没有,所以说各位这样做啊,你确实得过滤,但是别着急返回这个瑞特,你必须写啊,各位这不墨迹了,这不是那个过滤的条件吗?但是这个瑞你先别急着写,对吧,你先用一个这个变量啊,你把它过滤出来,那数组啊,给它收到我这么的行吧?A22随后怎么办?各位判断一下是不是需是否需要排序对不对?哎,判断一下是否需要排序,那我咋知道它排序还是不排序啊。
06:26
If读谁就得了,是不是这个sort type,如果this点嗯,这个this.sort type,它不等于零个位是啥意思?不等于零呢,就是哎呀一升序二呢啊那一降序啊,二呢升序,那不等于零,就是得排序呗,是吧,但是啊各位你不用写的这么那啥说不等于零,其实你这么写行不行,各位哎,我不写什么等不等于零就直接这么写。就是third type是否为真,无论你是一还是二,转成布尔值是不是都是真,那进来来排序,那如果是零呢,压根进不来,这不就得了吗?啊好了,同学,那咋排序啊,拿到过滤完的数组在排序,同学,这是一个重点,千万不要拿错人,你如果在这个绿色框的位置,咔一下子你写成了this person,那不好意思,各位,你过滤完这数组你是不是没用啊?哎,一句话,先过滤再排序,好,咋排序又看你基本功了,是不是有一个S方法。
07:28
啊,数组身上的吧,好,给它一回调sortt方法能收到什么?Sortt方法需不需要写返回值?Sortt方法改不改变原数组,这都是应该你瞬间就反馈出来的东西,OK,好,直接说了啊各位sortt进行排序的时候呢,会能收到前后两个数据项A和B啊那在这儿呢,就看你怎么写了,如果你return的是来吧同学,咱简单复习一下吧,把这块儿呢给它注掉啊,我写在最后啊,比如说呢,你有一个数组A22啊这里边呢顺序我打乱啊,132132,然后呢645,然后呢,我想让它是123456,就是越往后越大,那我得咋写ar.sortt是不是有一个前项和一个后项啊,那我想升序怎么办?就越往后越大同学,其实就是返回A减B和B减A这么一个问题,对吧?啊,我先写A减B,你观察着同学啊,我就直接说了,Sortt是改变元数组的,哎,谁点sort就是对谁排序。
08:28
调完了这个salt呢,这个数组本身就改了啊,那咱看一下各位啊,回到这个页面当中啊,打开控制台,你看123456是不是升序,哎,那我想降序呢,后减前不就是降序吗?看654321行吧,好了,那这块呢,咱们就给它删掉了,那回到我们这个里面来吧,各位走一个A一个B,或者你用这个P1P2也行,对吧,前后两个人,哎,那你说这来吧,各位返回什么呢?我到底是前减后还是后减前,我问你是不是得看thought type是一还是二?对不好,那这怎么写,是不是得写一个判断呀?啊,我写一个三元表达式,哎,我这么写,我问一下this.s type你等于一吗?他说我等于一,那你说你怎么办?一代表啥来着?是不是降序?降序怎么着了呀?是不是后减前呀?说老师OK了呀,P2减P1不就得了吗?诶你要注意哈,各位,你这里的P1P2可不是刚才我写例子里那123456啊,你这P1P2是不是对象啊?哎,你得怎么写呢?p2.age减去P1,诶,然后点A值对吧?那如果要不是这个一呢,不是一,那就是二呗,走这那就是P1,点A值减去谁呢?P2这不就得了吗?哎,说老师好了,这回终于写好了,各位啊,别激动啊,啊,你想一个问题,各位是你这个arr呢,过滤出来了,是你经过了排序。
09:55
但是最终的最终,我问你这个file persons有返回值吗?没有没有返回值,同学你这计算属性那不白计算了吗?哎,千万别激动啊,在最后呢,得写这么一个东西,就是written,谁呢arr这不就OK了吗?好看一下效果啊各位,嗯,我这样啊,我把这个年龄啊,我改一下,因为我写的太好了,各位你看19 20 21 22本身就是一个升序的对吧,那我这样我打乱一下啊,比如说这儿呢是30,哎完这儿呢是31,然后这儿呢,我写这个18,然后这儿呢我写19,各位你看我这么写就是啥意思,不是升序也不是降序对吧?好了,回来咱先不搜索啊,先进行一个正常的排序,说我要升序18 19 30 31,对吧,说我要降序31,三十十九十八对吧,说我原顺序原来啥样就啥样对吧?哎,这会儿吧,可神奇了,总有一些同学啊,整不明白,说老师这原顺序他咋回去的呢。
10:54
我都已经排序了,那数组被改了原顺序,他咋回去的呢?各位你看一下开发者工具你就明白了,我问各位啊,这person丝我从来没动过,你说对不?各位我一直在操作的是不是都是fair persons呀,之所以能回去就是原数据你压根没动是不?各位好,那我们搜索一下试试啊,比如说搜索这个东30 31,那我想升旭。
11:18
对吧,那本身它就是升序的,那我想降序呢,三十一三十,那我原顺序呢,是不是就在这儿,OK各位啊,你看看这个计算属性它有多么的强大,各位你只要把逻辑配在这个里面,这个里面只要写的任何一个属性发生变化,整个这个计算属性是不是都给你重新进行计算呢?之所以你刚才来刷新,你点这个什么升序降序,它这有反馈是因为啥同学你点击升序和降序的时候,我问你是不是在改sort type。那我再问你,这个计算属性里面用没用到这个s type用到了,那你说你每一次修改s type,它是不是都重新执行啊,OK,同学,列表排序讲完了,一切的逻辑都在计算属性里呢,你说对吧?好,这一小节我们听。
我来说两句