vue前端过滤排序

<template>
   <section>
      <input type="text" v-model="searchName">
      <ul>
         <li v-for="(p,index) in filterPersons" :key="index">
            {{index}}--{{p.name}}--{{p.age}}
         </li>
      </ul>
      <button @click="setorderType(0)">年龄升序</button>
      <button @click="setorderType(1)">年龄降序</button>
      <button @click="setorderType(2)">原先排序</button>
   </section>

</template>
<script>
    export default {
        data() {
           return{
               persons:[
                   {name:'Tom',age:18},
                   {name:'Jack',age:16},
                   {name:'Bob',age:19},
                   {name:'Rose',age:17},
               ] ,
               searchName:'',
               orderType:0,//0原版本 ，1升序，2降序

           }
        },
        computed:{
            filterPersons(){
                const {searchName,persons ,orderType}=this
                let fPersons;
                fPersons=persons.filter(p => p.name.indexOf(searchName)!==-1)
                if(orderType!==0){
                    fPersons.sort(function(p1,p2){
                        //1升序，2降序
                        if(orderType===2){
                            return p2.age-p1.age;
                        }else{
                            return p1.age-p2.age;
                        }

                    })
                }
                return fPersons;
            }
        },
        methods:{
            setorderType(ordert){
                this.orderType=ordert
            }
        },
    }

</script>