开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情
前言
之前写过一篇类似的相关文章，那个时候对于 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>
代码说明
-
实现该功能用计算属性和监听属性均可，但是这里选择使用计算属性会更加简单理解。
-
首先定义一个参数【persons】用来接收原始的数据集；
-
然后定义一个计算参数【fillPersons】用来实现页面显示；
-
参数【keyWords】表示输入框的内容。
-
首先用数组的过滤方法【filter】，获取到符合输入框内容的人员，然后该方法会返回一个新数组【arr】，如果不做别的处理，那么将【arr】返回给【fillPersons】，即实现所需功能。
-
这里又加了一个排序的功能。所以使用数组的【sort】方法。该方法有两个参数，分别表示前项、后项。其中：前-后表示升序，后-前表示降序。
-
通过属性【sortType】来控制升序和降序。
-
结束语
创作不易，如果该文章对你有所帮助，那就一键三连+转发吧！
