10_尚硅谷_Vue_列表的搜索和排序

好，下面我们有另外一个效果，我们来看一下啊，这个效果是一个什么呢？列表的搜索，搜索过滤啊和一个排序。上面这一个是我输入了一个搜索的关键字，譬如说我不有内吗？我找出的是name，里面包含什么？O的吧，能看到吧，我这边说了一个O，那其他的是不是都被过滤掉了，好，这是一个搜索功率，再一个我下面有几个按钮。能进行什么，是不是年龄的排序？能看懂是吧，好行。那下面呢，我们就来去做啊，这样的一个效果。打开，我们来开始啊。来，稍微还是要去把基本东西写一写，一个view。

点啊，假设我这里面写的是井号开始啊，那还没写呢，先写一个，再来个D。我这里面是不是也要有一个人的列表啊，那就有个数组数据，我就用以前的这个。就问他。OK吧，好OK啊。那OK，以后呢，下面我们要去稍微写一些模板啊，写个什么div呗，它的ID是。能懂是吧？好，上面应该有个什么input，下面是ULR，这个咱会写对吧，哪一个for in谁。刚他们写过吗？啊，这里面都会写了p index。冒号K等于index。和这个里面看，它显示的还是我们刚才那几个是吧，Index显示出来。

接着是P脸。接着是p.a好，下面还有一些，下面是不是有三个按钮啊。来把这三个钮摆开啊，发展。三个吧，啊三个好了，第一个一个是按年龄排年龄顺序是吧，啊年龄啊升序。好，下面一个是什么相序。没问题，接着这个是什么，最后一个。是原本的顺序啊，原本顺序。可以吧，好啊，来先看一下我们的整个界面。能不能基本上做一个显示可以吧。但是呢，我们现在交互功能还没有是吧？啊比如说啊举个例子，我在这里输一个O。

他现在变了。普遍啊，对不对，那要输O应该剩下谁。应该这里面有三个吧，这一个是不是应该消失啊。好，但现在没消失，没消失为啥不消失呢？这你得想啊，我们现在变的是谁？Persons是吧？编的是persons，大家要知道啊。那也就是说，我们不能直接编辑，这是相当于所有的数组吧，所有人的数组。我们应该要有一个。过滤以后产生一个什么呢？譬如说举个例子，我最好有一个这样的一个属性叫fair。Person损，我应该根据我当前这个破损产生另外一个person损。就是过滤以后产生一个新的数组，而我显示的不是它对吧，而是这。

好，这个数组怎么决定呢？就这个数组它产生的条件有哪些？首先这个是肯定要的。是吧？光有他不够吧，还一个看什么。师傅，我输入框输入了什么数据？懂不懂好，只要我这两个确定了，他是不是确定了，其实这个已经定了，对不对。这个肯定是定了，关键是他要确定是吧。那他要确定一旦有音input的必然会有一个指定属性model，是吧，我可来一个search name搜索的名字吧，可以吧，Name开始它的值给一个初值。空是不是就可以能不看到，好，后面只要我一输入这个值是不是就会改变。

而我的这个filters就根据它。还有他进行。过滤计算，哎，这里面有个概念，我的计算来产生，只是这个计算重要做件事情叫什么？我们把它称为过滤。懂不懂好了，那这个东西定义在哪呢？啊，是定义在这个里面吗。不是你定义在这里面肯定不行，那也不是定义在方法里面，因为我这根本就不是一个什么计算的回调函，一个事件回调函数。对吧，我刚才说过了，我强调一个东西，就是我的这个结果是根据这两个值来动态计算出来的。是概念吧，也就是说这两个值一旦确定了，我是不是通过一番计算过滤就能产生这个结果？那说明他要用到一个技术啊。不就计算熟悉吗？

计算属性它难，难的地方在哪里？难的地方是你不知道要用计算属性。就什么意思，你你根本就不想到，想不到，我要用这个技术，他确实又需要，那你肯定做不出来嘛。对吧，一旦想清楚了，其实就好办了，也就是说我们现在要定一个计算属性，因为我当前是不是只需要有一个结果就行。啊，那我最最简单，这是第一个方法。最后必须要有个什么呢？Return return的结果是不是就我显示的这个结果。真的吗？好？那先。定义出来所有相关的数据啊，取出相关的数据，什么叫相关的数据呢？也就是我的这个结果跟哪些数据有关系。

这个应该知道的，是不是他们俩啊，那我可以这么做，来个大货，来个类对吧，来个person。可以吧，直接等于this。就可以了。结构赋值嘛。能不能看到答案？你不写这个，是不是要写两条语句？这个语法没问题吧，好。来下面啊，下面我们下面就是要对什么进功率。Person啊OK，对person进行过滤对吧，好了，来吧，过滤。那我们要过滤，对数组进行过滤，调用它的什么方法？肥的方法嘛，自然的，对不对。能看到吧，啊的方法好来括号调用吗。

在的吧，在方法里面穿什么来着。函数，函数里面怎么分配呢？来个P是吧？啊箭头，这个箭头返回的应该是什么类型的值。类型如果是什么概念？这个返回的啊，来啊，这里面我定义一个啊，定义一个定一个最终要返回的那个数组，我叫他。F是吧？啊，这个啊，因为它是light。假设这个是什么呢？过滤后啊，就是需要啊，最终啊，最终最终需要显示的速度。啊，数据好，那也就是说最终返回是它。是吧，那也就是说这个过滤是不是应该等于它呀。没问题吧？没问题啊，好。

来，如果得数什么概念，我就这么写的。有过滤吗？没有。因为都防数嘛，那不都留下来了吗？那如果破了。那啥也没了对吧？当然不能这么写啊，好，我这里写个他啊。或者说我直接直接在里面搞是不是就可以了，来直接再做啊，也懒得写月天了，来我看什么。拿P啊，看着我这里面是不是有个社区内，社区内跟谁进行比较。P点进行比较，怎么个比较法？得看P点里面有没有包含这个。四零。是不是这概念啊，其实。需要去调用这样一个方法。

Index。什么概念？大家看着in什么意思呢？就是看这一个串，在我当前这个字符串里面。的下标。比如说假设啊，我有一个to，我的世界name是to，你输了一个O。那index的。一嘛是吧，那如果我输了一个A。里面有吗？没有没有找不到的话返回几了负一。这个不懂，就得到我这个子串，在这个大的串里面的什么出现的下标。能懂吧，那怎么样才算找到了呢？对吧，比如说你可以写大于等于零对不对，你还可以写什么呢？不等于负一。

一旦不等于负一说明什么？说明里面有吧，是包含了那个。这个能懂吧，好啊，那这样的话，我这边一旦包含了这个结果应该是true吧。那就这样。这个要看懂啊，这个看懂其实考察的是你的基本功啊，跟没一点关系没有。好，这是这一个。那最终我们就看啊，最终返回来是不是过滤以后的速度。没问题啊，来我们来看一下我们当前的一个情况，看它行不行，同时把这个也打开。哪个呢？就是我们有view的组件，一定要看着这个工具，这工具非常有用，而且还能看的出来当前是不是有date，有计算属性呢。现在计算属性，因为元素是什么，几个，是不是四个。

能看到吧，啊能看到好，接着我输入一个看看我输入一个A。什么意思，总数数还是四个吧，就计算过率以后的了，是不是剩下一个了呀。有意思吧，挺快的，是不是好，我输入一个C了，是不是还是一个好，我输入一个B了。能懂吧，这个应该好懂了。没问题是吧，啊说明可以进行过滤是吧。好，但是你看我回去它是不是又出来了。各位可以。啊，可以以后啊，你说我们现在这个搜索过滤不就搞定了吗？但除了搜索过滤，比如说我输入一个O，大家看到现在十八十九十七这个顺序吧，不太好。

对吧，我想同时进行什么。排序。对吧，啊排序，那也就是说啊，现在我点击以后啊，我要对这个数组。进步进行什么排序的操作吧。那这咋做呢？对吧。啊，来看一下啊，大家看到这个点它啊，我们这里面有四个按钮。我们对排序的时候是有三种情况，一个是按年龄顺序，一个是按年龄什么降序，再一个原本顺序，那也就是说我一共有几种情况，三种情况对吧？如果我有两种情况，那我一般会取一个不形的标识。对不对，但现在我一问什么。三种，这搞个boy坏性标志行吗？不行啊。啊，这个时候呢，来我们可以去。

哪一个数字类型的各位。可以吧？就数字类型的应该是可以的，对不对，好看着我这么做。啊，我这么做的，我来一个我的。太。可以吧，可以让它的初始，譬如说为零开始，零代表什么呢？那你要有一个要一个一啊，譬如说零代表啊，原本顺序可以吧，就不排序呗。好，那下面就要说了，你后面还有还有两个字吧。还有两个字。啊，譬如说一，那就代表比如说随便啊，这个是你设计的，你想代表声序就升序，你想代表相序，序A过去代表假设啊是C序可以吧，那二就必然代表什么项序。OK，就这样的一个意思，好啊，你现在有个这样一个设计啊，呃，这样设计好，那在这个时候，在这个时候我们进行过滤以后，下一步要根据这个值。

进行什么操作？是排序啊，也就是说我从我这个相关数据从两个变成了什么。应该不止两个了，是不是跟他还有关系？能不能跟他是有关系的，那同时我要把它什么取出来。那也就是说下面我要干嘛呀。排序对吗？但是一定会进行排序吗？不一定。因为只有它不等于零的时候，是不是才排序，所以我这个排序的前提，也就是说它不等于什么零，我下面去干嘛去。是不是排序啊。没问题吧，那排序要调用数组的什么方法呀，是吧，是不是调用它所有的方法，而且是不是还要传比较函数。

是看见吧，算比较函数好了，这个是P1，这个什么P2。是吧，好。来啊，而且我还有两种情况。我有两种情况，一个是升序，一个什么降序啊，把这个打过来就好说了，是不是有两种情况。能没看懂好，那到底是生肖降序看什么的还记得不？啊，看着。啊，我先写一个，比如说p2.a减去p1.a，这个升学加距啊。啊，OK，忘了是吧，那我要说一个标准，还不知道还记不记得啊，如果返回负一反负数对吧，反负数代表什么。

啊，就是这个，如果返回的是负数，我听一下子就忘了啊，如果返回复谁在前面来着，P在前面吧，我记得没错的话啊，PE在前面啊诶。P1在前对吧，那反过来说啊，返回正数了，P2在前面啊，返回正数。PR在线是吧。OK，好，来意这个原则假设我这么写的分析啊，你看清楚说我就这么写的。看它是个升学间系，看判断一下，你你返回正数，先看正数，返回正数，那就是P2大呗，对吧，P2大P2在前面。怎么去降序？也就这么返回的一个条件了。得有个条件，什么条件。啊，大家看到降序不应该是这个，What要等于什么啊，那也是我这里面是不是一个1ELSE，如果什么它等于几啊，那我就这么返回呗。

是不是这意思？否则呢，一共不就三个十嘛，别X11了是吧，否则怎么办？p1.a减去什么？p2.a。那这自然就是什么。肾虚了吗？能看到吧。没问题吧？当然现在啊，现在我们当前的初值危机。零也就是说我们现在去显示啊，大家看到是原本的顺序能看懂不？那现在我是不是要点它或者点它来去实现升序或者降序。我要想更新界面，我只需要更新谁，是不是数据。

能不能，那也就是说我们在这里面。At等于我们是不是要给它设置值啊，啊叫set what time。这时候得给传一个值吧，传几啊。你当前对应的那个what type是一对不对，那很自然，那我们后面的跟这个写法是什么一样的，只是要改一下这个什么啊，下面这一个那就零了。对吧，好，下一步。定义这个什么方法。啊，定义这个方法，那就来个什么message，来这个啊，指定一下参数，就为一个新的什么what type，我这里面要写的太简单了。

时间，我的type等于什么我的type？是吧，那也就说一旦我点击按钮，我的what type是不是发生了改变？一我的what发了改变我的这个计算属性的这个方法就会立即重新什么执行。我们说计算属性的这个方案什么时候掉啊，只要首先初始化肯定掉是吧，在一个很重要的时候，只要相关的属性发生了什么变化。来我们来看一下啊，看一下。首先啊，我还故意有一的竖勾好了点顺序。是吧，相序圆满顺序。对。啊，其实在项目开发中，像这种过滤和排序这个应该是比较多的。

做起来其实并已经算很简单了，告诉你，如果你用几块去写，还是挺费劲的。因为就算你有人说老师这块不是很牛逼吗？但是啊，这块只是说简化了多么操作。那你的方法那些语句是不是名字都很简单了，但该做的操作还是要做的，而我们这边看到这么多代码，你有看到去操作什么页面吗？你有看到操作多吗？没有，根本就没有，全部都是数据。全部都是一系列数据的操作。啊，整个代码里面就没看到你去操作。就这种搞法其实已经很极大的。啊，降低了你的工作的强度啊。好，那整个呢，我们就写完了，那下面自己大家可以看一下。啊，先休息会休息。