一、前言
之前写过一篇相关的文章，那个时候对于vue查询不甚了解。现在重新温习一次vue，有了新的认识。但是将新的也是通俗易懂的理解分享给大家，希望一起进步。
二、业务场景
实现动态查询：输入框输入内容，然后列表根据输入框内容动态显示。
截图：
三、实现代码完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>人员列表</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<h2>人员列表</h2>
<input type="text" v-model="keywords" />
<button @click="sortType='1'">升序</button>
<button @click="sortType='2'">降序</button>
<button @click="sortType=0">不变</button>
<ul>
<li v-for="p in fillPersons" :key="p.id">
{{p.id}}--{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
keywords: "",
persons: [
{ id: "001", name: "张三", age: 20, sex: "男" },
{ id: "002", name: "张无", age: 22, sex: "男" },
{ id: "003", name: "三元", age: 18, sex: "男" },
{ id: "004", name: "四元", age: 25, sex: "男" },
],
sortType: 0,//1升序，2降序，0不变
},
computed: {
fillPersons() {
const arr = this.persons.filter((p) => {
return p.name.indexOf(this.keywords) > -1
})
if (this.sortType) {
arr.sort((p1, p2) => {
return this.sortType == 1 ? p1.age - p2.age : p2.age - p1.age
})
}
return arr
}
}
})
</script>
</body>
</html>四、代码说明
实现该功能用计算属性和监听属性均可，但是这里选择使用计算属性会更加简单理解。
1、首先定义一个参数【persons】用来接收原始的数据集；
2、然后定义一个计算参数【fillPersons】用来实现页面显示；
3、参数【keyWords】表示输入框的内容。
4、首先用数组的过滤方法【filter】，获取到符合输入框内容的人员，然后该方法会返回一个新数组【arr】，如果不做别的处理，那么将【arr】返回给【fillPersons】，即实现所需功能。
5、这里又加了一个排序的功能。所以使用数组的【sort】方法。该方法有两个参数，分别表示前项、后项。其中：前-后表示升序，后-前表示降序。
6、通过属性【sortType】来控制升序和降序。
五、其他
上述方法亲测有效。
创作不易，希望点赞！！