摘要：
排序默认升序降序搜索列表{｛index｝}-｛｛p.name｝}-{p.age｝}导出默认｛name:“list”，data（）｛return｛orderType:0，搜索名称：'，人员：[｛name:'张三'，年龄：18，性别：'男'}，｛姓名：“李思2”，年龄：128，性别：“男”｝，｛名称：“王武”，年龄138，性别：”男“｝，{姓名：”赵刘“，年龄148，性别：'男“}，｛名字：”田琦“，年龄158，性别：‘男’｝，｝姓名：‘星八’，年龄168，性别：’男“｝”，｛姓名“高九”，年龄178，性别：男“｝，】，｝，方法：｛orderByAge｛this.orderType=orderType；｝｝，计算：｛//filtered fileterPersons（）｛//ordertype被传递给let｛searchName，persons，ordertype｝＝this；letarr=[…人]；//如果{arr=persons.filter（（p）=˃（p.name.indexOf（searchName）！
<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>