00:00
下面呢,我们来写一个练习,用上我们前面所学的这些技术啊。那么来看这个练习呢,首先它呢有以下这些功能,整体呢是一个组件啊,它上面呢是一个input,中间是一些便利展示的test文本,下面有三个按钮,这是整个页面结构。然后页面功能的话呢,就是上面有个搜索功能,当我们输入关键字的时候,下面就会过滤生成啊,就是只显示对应的这个名称的这个数据。然后同时呢,下面这里有一个便利啊,有一个排序功能,点击顺序呢,它就会按照年龄从小到大的顺序排序,这样去就从大到小,原本顺序就是它目前的这个效果。那么好,下面呢,我们就去来完成这个练习啊,先完成静态组件,再完成数据展示,最后来写这个搜索和排序的功能。一起来看。开发代码呢,我们在下面新建一个新的文件啊叫DEMO4。
01:04
创建。好呃,创建好DEMO四周呢,在这里面我们去写一下这个静态组件。整体的话呢,它上面是一个input输入框,然后加一个place holder,写上我们要请输入。搜索内容。然后接下来呢,下面是一些便利展示的文本。啊,我们写个T,将来病例展示就好了,再下面的是两个三个按钮,分别是年龄顺序。年龄降序和原本顺序。好,那么写完之后呢,当然我们现在效果还是有所偏差的啊,我们不着急,待会我们来调样式,现在的话呢,我们先把这个展示呢,数据展示做一下,然后再根据数据展示的内容我们调样式。
02:02
我们提前定义好一些数据啊,Persons。里面呢,就是有ID,然后呢有它的名称Jack,有它的年龄。对吧,那么我们来六七份,或者是多一点也可以,少一点也可以啊,反正就是多来几份这样的数据,后面呢,我们来改名字啊,ID的话呢,为二,这里呢,我们为Rose。年龄再小一点,16。ID为三啊,Tom。那么年龄的话呢,我们都故意错开20啊。哦,四这是这里。老师。我的话呢,就比如说Mary。那么21。六的话,我们来一个Lucy。对吧,他年龄的17,好了,我们呢就定义了这样六条数据,接下来我们将purpose对这个test进行编辑展示,V-four。编辑出来的数据呢,我们就叫person in persons添加一个唯一的key,属性值呢,用person ID。
03:07
好,注意这里用了这个VGA by的语法啊,因为这个person是个动态数据,所以说要用VGA的语法。然后里面呢,我们就展示数据就好了,person.name看一看啊。Person the age。好了,到这里呢,我们就把这个代码的开发完毕,静态组件和这个数据展示功能。我们呢,将这个DEMO3改成我们的DEMO4,点击保存。然后呢,右键我们来渲染显示。好了,那么整个页面呢,长这个样子啊,我们接下来调节样式,首先呢,我们让这个输入框呢,稍微宽一些吧,我们给输入框加一个class name叫search,叫搜索。
04:01
宽度为百分百。喂,这样的话呢,我们自带更新一下它的宽度呢,就充满整个区域了啊,然后上下有间距都可以调啊,我们给整个页面的一个painting,不至于我这个文字顶在左边。到时候呃,太太左了哈,偏我们来个偏定10P。好,这时候呢,它就不会靠这么边,那么这个40呢,我们给个Mar button那个视频S啊,那么也靠的不要太近,然后按钮的话呢,我们要水平排列啊,要水平排列的话呢,我们要包一个容器。报个容器。好类名的话呢,我们就叫container就好了啊。水平排列,它默认的flash布局,它是垂直排列的,水平排列等于Fla direction为肉。好,这里就要和说明一下,就是在咱们的这个里面呢,所有样式啊,它默认都是采用的是flash布局,并且是垂直排列,所以说我们就不需要再加flat布局了,只要让它由垂直排列变成水平排列,它自然就会水平布局。
05:13
是吧,然后呢,我们给上面加一个上边句那TOP10PS这样的话呢,我们就能看到这个基本效果了,诶咱们的静态组件写好了,同时中间的数据展示也完成,那么其他样式呢,我们就不打算一点调整啊,有兴趣的同学可以自行调整一下。我们接下来关键的就是来做这个功能,接下来重要功能就是搜索功能,还有这个排序功能,我们先完成这个搜索。搜索的话呢,它的作用就是在这里输入一个文字啊,然后呢,下面就要显示包含这个文字相关的数据,也就是说不包含这个文字数据呢,就不展示了。整个功能分为两部分完成。第一部就是如何获取它搜索的内容。第二部分就是要对数据做处理,只保留包含我们获取的这个数据的这个内容就好了。
06:08
那么怎么获取到用户输入的数据呢?诶,这个时候就用上我们前面学过的V-model指定了它的是双向数据绑定,那么当用户在输入数据的时候,它就会把用户输入的数据的值收集到这个表达式中,所以我们只要定义一个数据,比如叫search t搜索的文字,那么初始化呢,它得是字符串类型啊,就是通串就好了。空窗的话呢,一上来就不会显示任何内容,但是一旦你在输入框输入内容的时候,它就会自动的将的值更新成你输入框输入的内容。OK,所以收集数据啊,那么就是用VGA model。哎,即可完成我们想要的这个需求。好,收集好数据之后呢,我们就要对这个数据做处理啊,只显示我们这个包含这个搜索的数据的这个内容,那么这该怎么办呢。
07:11
对吧,同学们,接下来呢,你都可以把视频暂停一下,可以思考一下,你觉得怎么样对这个数据做处理,他才会只展示这些内容。好,这个时候我们就来揭晓答案啊,我们得用一个特殊的属性,就是计算属性。大家想一想,我在这搜索的时候,搜索完之后不是这个数据就要删除,而是暂时它不要不要显示对吧?所以原数据呢,它是不能发生变化,它一旦发生变化,比方说我把它这个原数据删掉几条,那么后面在搜索的时候就搜不到的,所以原数据process是不动的,而我们反而要定义个什么呢?定一个计算属性。计算属性呢,我们叫啊处理这个process啊这个数据。
08:00
那么怎么处理呢?我们要做的就是拿到咱们的这个z delete上面的process数据。同时我们拿到这个搜索的文字such test。我们拿到这个person数据呢,对search进行过滤,只保留包含4TEST这个数据的内容,那么这样的话呢,自然就可以了。来看啊,这时候我们定一个new persons,那么new persons呢,要做的就是对persons进行或滤。非方法呢,是一个过滤的方法,里面呢,接收一个函数,函数的第一个参数就是便利的这项元素,我们要判断便利的元素的这个用户名是否包含includes,是否包含咱们的这个sentence,这个这个文字包含咱们就保留,包含它就会返回处,返回处对于filter方法来讲就是保留返回false就是不包含,不包含就会过滤,这样呢会产生一个新数组,诶咱们能return出去。
09:02
对吧,所以这里就是这样的,这里就是啊过滤。过滤。诶,稍等这里卡了一下。过滤,OK。过滤只保留。包含的内容。好了,那么接下来呢,那我们过滤完之后呢,那么这里便利呢,就应该变定的是这个处理后的person,而不是处理前的person。所以这个就是这个搜索功能,一起来再看一下,就是收集到用户输入的数据,收集到s test里面,然后呢,通过计算属性对数据做处理,对吧?那么拿到persons,拿到现在呢,我不是直接要展示person,而是要做处理之后再展示这个数据,所以要用计算属性,那么怎么处理呢?过滤就好了。过滤的条件就是这个,下面我们看效果。
10:04
比喻好之后呢,我们在上面输一个内容,比如输一个A对吧?诶,这时候它就只显示Jack和Mary。我们删掉这个条件,输入O,它就显示Rose和Tom。对吧,双条件它又没了,所以这样呢,就完成了一个这样的搜索的一个小功能,那么我们借助的是VGA model收集数据加计算属性来显示相应的内容。好,接下来呢,我们还得做这个排序啊,我们要顺序降序,顺序要从小到大降序,从大到小都指的是年龄啊,有一种顺序就是他原来是什么样子就什么样子,我们要对它进行排序。排序的话呢,得用数组的一个sort方法啊sort方法,那么现在关键来了,我现在到底是要升序还是降序,还是原本顺序,我该怎么去处理。那么现在呢?大家也可以将视频暂停一下,也可以思考一下该怎么处理呢?
11:04
好,接下来呢,我们来告诉大家方案啊,方案就是我们可以定一个数数据。叫ordertime排序的类型。对吧,这个是搜索的内容,All the type是排序的类型。排序类型呢,我们一共有三种类型,我们来分别介绍一下啊,首先代表升序。D代表降雪。那么我们定义orange代表原本顺序。那么胰腺癌的是原本顺序,所以我们指纹on是排序的类型。当我点击顺序,我就要把这个值改为顺序的值ASD,当我点击降序,就要把它值改为D,代表降序。所以这时候我们就去把地世界啊来改变咱们的这个set all the time。那么他们都是要更新同一个值啊,所以说我们可以定义成一个方法来复用顺序的话呢,我们把值改为这个AC。
12:04
加下去的话呢,我们把值改为de,原本顺序我们就改为orange就好了,这样呢,我们就只要定义一个函数去复用了,非常的轻松。对吧,我们可以接受。然后呢,这里就C点塔点time等于这个值。这样呢,我们点击不同的按钮啊,那么我们的auto type的值就会与之发生相应的变化。好,处理完之后呢,那么接下来啊,我们就要对咱们的这个显示的数据进行排序了,好,我们现在显示的数据呢,就是这个handle persons,所以我们要对里面的这个new persons进行这个排序。排序呢,分为在前面排序还是在后面排序,诶大家觉得我应该在哪里排序呢?我们最终的选择是在后面排序,因为前面如果排序的话,大家想啊,我一共有六个元素,你要排列序的是六个元素,而后面的过滤完之后,我可能只有两个元素了,我要排序的只有两个元素。
13:08
那么明显六个元素排序的时间会比两个元素排序时间更长,所以我们呢,是在下面进行排序的。排序怎么做呢?那也很简单啊,我们拿到这个order type。对啊,判断就好了。判断B的值,看它是不是等于SE,是SE说明是升序啊,顺序的话我们去点sort。算的方法呢,我们有A和B啊。那么我们要对年龄排序,算是a.H减去b.H减去BA就是顺序,那么具体哪个字段参与排序,就A等于什么什么,减去B等于什么什么就可以了。L呢?我们来判断它是不是降序。复制一下吧。
14:02
DC降序,降序的话呢,就将B1减A,这就是降序了。那么在else的话是原本社区,原本社区不需要做任何处理,所以就不用处理了。是不是原本顺序,原来的process就是原本顺序,你不需要做处理,就是原本顺序,你是升序或者降序才能做处理,原本顺序什么都不用处理。好了,这样呢,我们就完成了排序功能,下面我们来看见证奇迹对吧?往方点击升序,那么年龄就是从小到大,点下去,年龄就从大到小,原本顺序它就会还原成最开始的样子。好了,这时候如果将它搜索也是一样的,我们来搜一个A对吧,那么顺序它就是从小到大,这样去下去的话呢,它就应该要从大。到这个小对吧,哎,这时候我们看一下是不是哪个数据写错了,它这里没有发生变化。把this.or the type的值等于我们设置的这个type type呢?我们也从thisc里面提取了。
15:04
加下去的话呢,就是b.H减去a.HD的话,就是这个啊,OK,应该是没问题的,我们来看一下它这里搜索完之后,这个数据它有些小问题啊。诶。降序的话呢,原本顺序和降序,它好像没办法去达到这个效果。好,呃,这里还是点击这个顺序呢,它没法发生变化。呃,原因呢,在于我们往上走啊,在上面上面呢,我们便利元素呢,需要包一个容器啊,如果不包容器的话呢,会导致下面元素的一些事件啊,一些内容出现一些紊乱,所以我们包一个容器,我们再来试试。给上面遍地元素要报个容器,所以这个意思就是当我们遍地显示多个元素的时候,记得要报个容器,这样呢就不会出现问题了,我们再搜一下A升选。
16:03
降序你看降序也变了对吧,原本顺序它就是生戌的样子,所以说没有问题啊。好了,我们最开始再试试也是没有问题的。好了啊,在这里呢,我们记得要包个容器啊。否则。可能影响。到其他其他其他的功能。好了,那么这以上呢,就是我们整个过滤和排序的功能了,我们统一的都在计算属性中完成。
我来说两句