27.Vue列表过滤_爱米酱的博客-CSDN博客目录1.使用watch属性实现列表过滤2.使用计算属性实现列表过滤3.总结这一小节我们来讲一下Vue的列表过滤,那么想要完成列表过滤就需要有两个关键的步骤:1.获取用户输入2.根据用户输入信息进行匹配针对获取用户输入这一步,我们就需要使用v-model,使用双向绑定,这样用户的输入就可以实时的反馈到数据层。而针对用户信息匹配这一步,最标准的写法应该是使用计算属性去写,但是针对初学者来说可能想不到这么深,初学者可能最开始的想法是这样的只有用户输入的内容发生变化的时候才会进行过滤匹配,所以就要监听这种变化,那么https://blog.csdn.net/qq_37050372/article/details/125716385上一节我们讲了Vue的列表过滤,那么这一节我们把上一节写的列表过滤升级一下,加一个功能叫做列表排序。
我们把上一节的例子增加按年龄升序,按年龄降序,还有展示原顺序的功能。注意,这里增加的排序并不影响过滤的功能,也就是过滤和排序的功能是并存的。
列表排序
人员列表
- {{p.name}} -- {{p.age}} -- {{p.sex}}
实现效果:
这里有的同学可能会有点小疑问,就是升序和降序都是处理过的,那原顺序是怎么回去的呢?
这是因为我们始终处理的都是filPersons,而原数据persons,我们始终都未修改,所以当sortType为0,不做任何处理的时候,就是原顺序。



