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>

 

 排序示例结果

  •  初始状态

  • 点击’按年龄升序排列’

  • 点击’按年龄降序排列‘

  • 点击‘不排序’

 

 总结

  • 我们可以使用计算属性实现列表的过滤和排序功能
  • 掌握熟悉js基础函数sort和filter函数的使用方法

 

 

 

热门相关:恶魔总裁霸道宠:老婆,太惹火   驭房我不止有问心术   我真的是正派   医道至尊   战斗就变强