首页 > 其他分享 >数组排序方法sort---案例

数组排序方法sort---案例

时间:2022-08-23 10:45:51浏览次数:69  
标签:sort return name age sex --- 排序 id

<template>
  <div class="Leading">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyword"><br>
    <!--    {{ keyword }}-->
    <button @click="sortType=2">年龄升序</button>
    <button @click="sortType=1">年龄降序</button>
    <button @click="sortType=0">原排序</button>
    <!--    计算属性-->
    <ul>
      <li v-for="(item,index) in filPerson" :key="index">{{ item.name }}--{{ item.age }}--{{ item.sex }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ListSort",
  data() {
    return {
      persons: [
        {id: '001', name: '马冬梅', age: 18, sex: '女'},
        {id: '002', name: '周冬雨', age: 20, sex: '女'},
        {id: '003', name: '周杰伦', age: 19, sex: '男'},
        {id: '004', name: '温兆伦', age: 21, sex: '男'},
      ],
      keyword: '',
      filPersons: [],
      sortType: 0,//0原顺序,1降序,2升序
    }
  },
  computed: {
    filPerson() {
      const arr= this.persons.filter((p) => {
        return p.name.indexOf(this.keyword) !== -1
      })
    //  判断一下是否需要排序
      if(this.sortType){
        arr.sort((a,b)=>{
          return this.sortType===1?b.age-a.age:a.age-b.age
        //  前减后升序,后减前降序
        })
      }
      return arr
    }
  },
}

按照年龄排序,先过滤,后排序。

简易示例:

 

 

标签:sort,return,name,age,sex,---,排序,id
From: https://www.cnblogs.com/reverse-x/p/16615268.html

相关文章

  • 轻量级分布式任务调度平台(XXL-JOB介绍、原理、工作流程、XXL-JOB环境搭建集成springb
    轻量级分布式任务调度平台(一、XXL-JOB介绍、原理、工作流程)XXL-JOB#【轻量级分布式任务调度平台】(1)基本介绍#XXL-JOB是一个轻量级分布式任务调度平台,主打特点是......
  • keep-alive
    父组件:<template><divclass="app"><divclass="view"><!--include:组件的名称来自于组件定义时name选项--><keep-aliveinclude="home,a......
  • leetcode68-文本左右对齐
    文本左右对齐模拟先对所有字符串进行一次遍历,保证每个字符串之间有一个空格,然后对字符串分组,确定字符串的位置。然后对每一组的字符串分配空格:遍历这一组的字符串长度......
  • Exchange 2013故障X-OWA-Error: System.NullReferenceException
     Exchange2013里,用户在登陆OWA的时候报一下故障,出现意外错误,无法处理您的请求。X-OWA-Error:System.NullReferenceExceptionX-OWA-Version:15.0.775.32X-FEServer......
  • 方法的引用-冗余的Lambda场景以及通过对象名引用成员方法
    方法引用在使用Lambda表达式的时候,实际上我们传递的是一段解决问题的代码,给什么参数做什么操作。冗余的Lambda场景函数式接口以应用Lambda表达式:函数式接口:publicin......
  • U-Boot学习
    U-Boot,全程UniversalBootLoader,是BootLoader的一种,BootLoader就是在操作系统运行之前执行的一段小程序。对于ZYNQ而言,在引导过程中,分两步:一、先运行FSBL来设置PS二、......
  • fastjson反序列化CNVD-2019-22238
    漏洞原理:fastjson是阿里的开源json解析库,用来将json字符串反序列化为JavaBean类,或者将JavaBean类序列化为json字符串。在java审计中,需要关注的关键字:JSON.parse,......
  • 【推送服务】【FAQ】Push Ki常见咨询合集7--其它问题
    ​1、推送服务的错误码有哪些?推送服务有客户端错误码和服务端错误码两部分,还记录了开发者们在集成推送服务中遇到的常见错误码,如果这些错误码都不能解决您的问题,请联系技......
  • 14-JSP原理
    14-JSP原理概述本文主要讲述JSP的原理在前面的练习中,我们知道JSP就是一个类似HTML文件的东西,只是其中可以添加java代码,来添加一些动态元素那么JSP和Servlet又是什么关......
  • package.json 与 package-lock.json 的关系
    模块化开发在前端越来越流行,使用node和npm可以很方便的下载管理项目所需的依赖模块。package.json用来描述项目及项目所依赖的模块信息。那 package-lock.json 和......