<body>
<div id="root">
<h1>员工列表</h1>
<input type="text" placeholder="请输入查询名字" v-model="keywrde">
<button @click="suotType=1"> 升序排序</button>
<button @click="suotType=2">降序排序</button>
<button @click="suotType=0"> 原顺序</button>
<ul>
<!-- in 还可以换成of -->
<li v-for="(p,index) of filPerons" :key="index">
<!-- key ""里可以换成index 但是执行效率低 用p.id 执行的效率高 -->
{{p.name}}-{{p.age}}-{{p.phone}}-{{p.score}}
</li>
</ul>
</div>
<script>
Vue.config.productionTip=false;//阻止运行时提示开发版本
new Vue({
el:"#root",
data:{
keywrde:'',
suotType:0, //0原顺序 1升序 2升序
perons:[
{id:'001',name:'老徐',age:20,phone:'13608806913',score:65.4},
{id:'002',name:'许老',age:13,phone:'19958030698',score:89.4},
{id:'003',name:'张大柱',age:20,phone:'13608806913',score:88},
{id:'004',name:'李大钊',age:30,phone:'15925503566',score:65.4},
{id:'004',name:'李总',age:10,phone:'1557578988788',score:55.4},
{id:'004',name:'张三',age:50,phone:'15925503566',score:96}
]
},
computed:{
//计算属性
filPerons(){
//定义一个数组
const arr= this.perons.filter((p)=>{
return p.name.indexOf(this.keywrde) !==-1
})
//判断是否需要排序
if (this.suotType) {
arr.sort((p1,p2)=>{
return this.suotType ===1? p2.score-p1.score : p1.score-p2.score//升序后一个减前一个 降序前一个减后一个
})
}
return arr
}
}
})
</script>
