搜索过滤 以及排序

<template>
    <div>
        
         <div>
             <h3>排序</h3>
             <button @click="orderByAge(0)">默认排序</button>
             <button @click="orderByAge(1)">年龄降序↓</button>
             <button @click="orderByAge(2)">年龄升序↑</button>
         </div>
         <p>--------------------------------------</p>
         <!--过滤查询  -->
         <h3>搜索列表</h3>
         <input type="text" placeholder="请输入你所查询的姓名"  v-model="serchNmae">
         <ul>
             <li v-for="(p ,index) in filterPersons" :key="personsKeys[index]">
              {{index+1}}  姓名: {{p.name}} 年龄:{{p.age}}性别:{{p.sex}} --->{{p.phone}}
             </li>
         </ul>
         
    </div>

</template>
<script>
import shortId from 'shortid'
export default {
    name:'listRenderTwo',
    data(){
        return{
            serchNmae:'',
            personsKeys:[],
            orderType:0,//排序
            persons:[
              {name:'张三',age:18,sex:'男' ,phone:12345678901,},
              {name:'李四',age:16,sex:'男',phone:12345678901,},
              {name:'易遥',age:15,sex:'女',phone:12345678901},
              {name:'如花',age:18,sex:'女',phone:12345678901},
              {name:'夜华',age:18,sex:'男',phone:12345678901},
              {name:'二狗子',age:18,sex:'男',phone:12345678901},
              {name:'青蓝',age:16,sex:'男',phone:12345678901},
              {name:'李萌',age:15,sex:'女',phone:12345678901},
              {name:'周华',age:18,sex:'女',phone:12345678901},
              {name:'周燕子',age:18,sex:'男',phone:12345678901}
            ]
        }
    }
    ,
    mounted(){
      this.personsKeys=this.persons.map(v=>shortId.generate())
    },
    //计算属性
    computed:{
      filterPersons(){
        let {serchNmae,persons,orderType} =this;
        //取出数组中的数据
        let arr =[...persons]
        //过滤数组
        if(serchNmae.trim()){
            arr = persons.filter(p=>p.name.indexOf(serchNmae)!==-1)
        }
        //4排序
        if(orderType){
            arr.sort((p1,p2)=>{
                if(orderType===1){
                    //降序
                    return p2.age -p1.age
                }else{
                   // 升序
                   return p1.age -p2.age
                }
            })
        }
        return arr;
      }
    },
    methods:{
     orderByAge(orderType){
         this.orderType=orderType
     }
    }
}
</script>
<style  scoped>
  ul{
      list-style: none;
  }
  ul li{
      padding: 8px 0;
  }
</style>