【vue2】实现查询功能及排序功能_vue2 查询列表数据-优快云博客

本文详细介绍了如何使用Vue实现一个动态查询功能，通过输入框输入内容，列表实时过滤并按指定排序显示。通过计算属性和事件监听，展示了一个实用的前端开发示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

之前写过一篇相关的文章，那个时候对于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】来控制升序和降序。

五、其他

上述方法亲测有效。

创作不易，希望点赞！！