<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="assets/js/vue.js"></script>
<title>列表排序数组过滤</title>
</head>
<body>
<hr>
<div id="app">
<h1>人员列表</h1>
<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 filePeronns" :key="index">
{{p.name}}-{{p.age}}-{{p.sex}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;
const vm=new Vue({
el:'#app',
data:{
keyWord:'',
sortType:0, //0原顺序，1降序，2升序
persons:[
{id:'001',name:'马东梅',age:19,sex:'女'},
{id:'002',name:'周东雨',age:19,sex:'女'},
{id:'003',name:'周杰伦',age:24,sex:'男'},
{id:'004',name:'温赵伦',age:22,sex:'男'},
]
},
computed:{
filePeronns()
{
const arr=this.persons.filter((p)=>{
return p.name.indexOf(this.keyWord)!==-1
})
console.log(JSON.stringify(arr));
//判断一下是否需要排序
if(this.sortType)
{
arr.sort((p1,p2)=>{
return this.sortType===1? p2.age-p1.age:p1.age-p2.age
})
}
return arr
}
}
})
</script>
</body>
</html>