通过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>
网友回复
我知道答案，我要回答
私活外包
最新提问
python如何调用openai的api实现知识讲解类动画讲解视频的合成？
html如何直接调用openai的api实现海报可视化设计及文本描述生成可编辑海报？
f12前端调试如何找出按钮点击事件触发的那段代码进行调试？
abcjs如何将曲谱播放后导出mid和wav格式音频下载？
python如何将曲子文本生成音乐mp3或wav、mid文件
python中mp3、wav音乐如何转成mid格式？
js在HTML中如何将曲谱生成音乐在线播放并下载本地？
python如何实现在windows上通过键盘来模拟鼠标操作？
python如何给win10电脑增加文件或文件夹右键自定义菜单？
python如何将音乐mp3文件解析获取曲调数据？
