栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

28.Vue列表排序

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

28.Vue列表排序

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,不做任何处理的时候,就是原顺序。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1014329.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号