vue如何实现模糊查询及动态数据排序？
网友回复
通过filter和sort来实现，具体示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
</head>
<body>
<div id="test2">
<h2>模糊查询：</h2>
<input type="text" v-model="searchName" class="test1">
<ul class="test1">
<!-- filterPersons用到过滤运算 computed-->
<li v-for="(item ,index) in filterPersons" :key="index">{{item.name}}----{{item.age}}</li>
</ul>
<h2>排序：</h2>
<button @click="setOrderType(1)">年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">年龄原序</button>
</div>
<script type="text/javascript">
vm = new Vue ({
el:'#test2',
data:{
persons:[
{name:'Bob',age:'21'},
{name:'Jack',age:'20'},
{name:'Alex',age:'19'},
{name:'Rose',age:'23'},
{name:'Smith',age:'20'},
],
searchName:'',
orderType: 0,//0代表原序，1代表升序，2代表降序
},
computed:{
filterPersons(){
//取出相关的数据，
const {searchName,persons,orderType} = this;
//最终需要显示的数据
let fPersons;
// 匹配到满足条件的记录该下标，否则下标为-1;然后对person是进行过滤,过滤掉下标为-1的元素。
fPersons = persons.filter(item => item.name.indexOf(searchName)>=0);
//排序
if(orderType!=0){
fPersons.sort(function(item1,item2){//如果返回负数，则item1在前；反之item2在前
//1代表升序，2代表降序
if(orderType==1){
return item1.age - item2.age;
}else{
return item2.age - item1.age;
}
})
}
return fPersons;
}
},
methods:{
//通过按钮点击事件进行改变参数index对原数据进行排序过滤
setOrderType(index){
this.orderType = index;
}
}
})
</script>
</body>
</html>
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
