<div id="root">
	<h2>人员列表</h2>
	<input type="text" placeholder="请输入名字" v-model="keyworld">
	<button @click="sorttype = 2">年龄升序</button>
	<button @click="sorttype = 1">年龄降序</button>
	<button @click="sorttype = 0">原顺序</button>
	<ul>
		<li v-for="(p,index) in filpersons" :key="p.id">
			{{p.name}}-{{p.age}}-{{p.sex}}
		</li>
	</ul>
</div>

new Vue({
	el:"#root",
	data:{
		keyworld:'',
		sorttype:0,//0原顺序，1降序，2升序
		persons:[
			{id:001,name:'马冬梅',age:18,sex:'女'},
			{id:002,name:'周冬雨',age:19,sex:'女'},
			{id:003,name:'周杰伦',age:20,sex:'男'},
			{id:004,name:'温兆伦',age:20,sex:'男'}
		]
	},
	//计算属性执行情况：（1）初次读取时会执行一次  （2）当依赖的数据发生改变时会被再次调用
	computed:{
		filpersons(){
			const arr = this.persons.filter((p) => {
				return p.name.indexOf(this.keyworld) !== -1
			})
			if(this.sorttype){
				arr.sort((a,b) => {
					return this.sorttype == 1 ? b.age - a.age : a.age - b.age
				})
			}
			return arr
		}
	}
})

补充知识

sort() 方法

定义和用法： - sort() 方法用于对数组的元素进行排序。 - 排序顺序可以是字母或数字，并按升序或降序。 - 默认排序顺序为按字母升序。
语法：array.sort(sortfunction)