<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<title>列表排序</title>
</head>
<body>
<div id="root">
<h2>人员列表</h2>
<input type="text" placeholder="清输入名字" v-model="keyword">
<button @click="sortType=2">年龄升序</button>
<button @click="sortType=1">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<ul>
<li v-for="(p,index) in filPersons" :key="index">
{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
//用computed实现
const vm = new Vue({
el: "#root",
data: {
keyword: "",
sortType:0,//0代表原顺序，1代表降序，2代表升序
persons: [
{ id: "001", name: "马冬梅", age: 30, sex: "女" },
{ id: "002", name: "周冬雨", age: 33, sex: "女" },
{ id: "003", name: "周杰伦", age: 28, sex: "男" },
{ id: "004", name: "温兆伦", age: 21, sex: "男" },
],
},
computed:{
filPersons(){
const arr= this.persons.filter((p) => {
return p.name.indexOf(this.keyword) !== -1;
})
if (this.sortType!==0) {
arr.sort((p1,p2)=>{
return this.sortType===1?p2.age-p1.age:p1.age-p2.age;
})
}
return arr;
}
}
})
</script>
</body>
</html>
