<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>