Vue列表过滤与排序

概述

下面我将通过两个例子讲解列表过滤和排序，总的来说主要使用了数组的filter 和 sort 方法

测试数据定义

persons:[
    {name:'雷小军',age:44,sex:'男'},
    {name:'李连杰',age:55,sex:'男'},
    {name:'李彦宏',age:23,sex:'男'},
    {name:'马化腾',age:33,sex:'男'},
    {name:'马大云',age:60,sex:'男'},
    {name:'王小伟',age:25,sex:'女'}
],

1.列表过滤

目标：在文本框中输入关键字，根据关键字对列表进行过滤
实现方法：使用计算方法，在data中定义属性“keyword" 用来绑定文本框, 定义计算属性'filterPerson'用来绑定列表。当keyword改变时，filterPerson就会重新计算从而实现排序
js基础：filter函数

代码示例

<div id="main">
        <h2>企业家列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <ul>
            <li v-for="(p,index) in filterPerson" :key="index">
                {{p.name}}---{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
     
        //创建一个Vue实例
        new Vue({
            el:'#main', //el用于指定容器，值通常为css选择器字符串
            
            data:{//data用于储存数据，数据供el所指定的容器使用
                persons:[
                    {name:'雷小军',age:44,sex:'男'},
                    {name:'李连杰',age:55,sex:'男'},
                    {name:'李彦宏',age:23,sex:'男'},
                    {name:'马化腾',age:33,sex:'男'},
                    {name:'马大云',age:60,sex:'男'},
                    {name:'王小伟',age:25,sex:'女'}
                ],
                keyword:"",
            },
            computed:
            {
                filterPerson()
                {
                    return this.persons.filter((p)=>{return p.name.indexOf(this.keyword)!=-1});
                }
            }
        })
    </script>

过滤示例结果

初始状态
输入关键字‘马’检索

2.列表排序

目标：在前面示例的基础上实现按年龄升序排列，降序排列，不排列。
实现方法：在data中定义属性‘orderType’ (0:不排序 1 降序 2升序), 定义计算属性'filterPerson'绑定列表，当orderType改变时，filterPerson就会重新计算从而实现排序。
js基础知识：sort函数的应用。

代码示例

<body>
    <div id="main">
        <h2>企业家列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyword">
        <button @click="orderType=2">按年龄升序排列</button>
        <button @click="orderType=1">按年龄降序排列</button>
        <button @click="orderType=0">不排序</button>
        <ul>
            <li v-for="(p,index) in filterPerson" :key="index">
                {{p.name}}---{{p.age}}--{{p.sex}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
     
        //创建一个Vue实例
        new Vue({
            el:'#main', //el用于指定容器，值通常为css选择器字符串
            
            data:{//data用于储存数据，数据供el所指定的容器使用
                persons:[
                    {name:'雷小军',age:44,sex:'男'},
                    {name:'李连杰',age:55,sex:'男'},
                    {name:'李彦宏',age:23,sex:'男'},
                    {name:'马化腾',age:33,sex:'男'},
                    {name:'马大云',age:60,sex:'男'},
                    {name:'王小伟',age:25,sex:'女'}
                ],
                keyword:"",
                orderType:0, //0:不排序 1 降序 2升序
            },
            computed:
            {
                filterPerson()
                {
                    const temp= this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyword)!=-1
                    });
                    //判断排序方式
                    if(this.orderType)
                    {
                        temp.sort((p1,p2)=>{
                            return this.orderType===1?p2.age-p1.age:p1.age-p2.age;
                        });
                    }
                    return temp;
                }
            }
        })
    </script>
</body>