<template>

<div>
    <div>
    <h3>排序
    </h3>
    <button @click="orderByAge(0)">預設</button>
    <button @click="orderByAge(2)">升序</button>
    <button @click="orderByAge(1)">降序</button>
</div>
    <h3>搜尋列表</h3>
<input type="
 
text" v-model="searchName" placeholder="請輸入名字">

<ul>
    <li v-for="(p,index) in fileterPersons">
        {{index}} --{{p.name}}--{{p.age}}
    </li>
</ul>
</div>
</template>
<script>
export default{
    name:"list",
    data(){
        return {
            orderType:
 
0,
          searchName:'',
            persons:[
                {name:'張三',age:18,sex:'男'},
                {name:'李四2',age:128,sex:'男'},
                {name:'王五',age:138,sex:'男'},
                {name:'趙六',age:148,sex:'男'},
                {name:'田七',age:158,sex:'男'},
                {name:'邢八'
 
,age:168,sex:'男'},
                {name:'高久',age:178,sex:'男'},

                
                ],
        }
    },

    methods:{
        orderByAge(orderType)
        {
            this.orderType=orderType;
        }
    },
    computed:{
//過濾的
fileterPersons(){
    //ordertype傳過來
let {searchName,persons,orderType}=this;
let arr=[...persons];
//
if(searchName.trim()){
    arr=persons.filter((p)=>(p.name.indexOf(searchName)!==-1));
}
//排序
if(orderType){
    arr.sort((p1,p2)=>{
        if(orderType===1){//1為降序
       return  p2.age-p1.age;
        }else{
          return   p1.age-p2.age;
        }



    });
}
return arr;
}
    },
}
</script>
<style scoped>

</style>