vue学习：列表的过滤与排序

最新推荐文章于 2024-05-16 10:43:22 发布

你认识小汐吗

最新推荐文章于 2024-05-16 10:43:22 发布

阅读量469

点赞数

分类专栏： vue filter sort

本文链接：https://blog.csdn.net/sayoko06/article/details/85001487

版权

vue 同时被 3 个专栏收录

25 篇文章 2 订阅

订阅专栏

sort

2 篇文章 0 订阅

订阅专栏

filter

1 篇文章 0 订阅

订阅专栏

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性
来返回过滤或排序后的数组，例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表渲染_过滤与排序</title>
    </head>
    <body>
        <!--
            1.列表过滤
            2.列表排序
        -->
        
        <div id="test">
            <input type="text" v-model="searchName"/>
            <ul>
                <li v-for="(p,index) in filterPersons" :key="index">
                    {{index}}--{{p.name}}--{{p.age}}
                </li>                    
            </ul>
            
            <button @click="setOrderType(1)">年龄升序</button>
            <button @click="setOrderType(2)">年龄降序</button>
            <button @click="setOrderType(0)">原本顺序</button>
        </div>
        
        <script type="text/javascript" src="../js/vue.js" ></script>
        <script>
            new Vue({
                el: '#test',
                data:{
                    persons:[
                        {name:'Tom',age:18},
                        {name:'Jack',age:16},
                        {name:'Bob',age:19},
                        {name:'Rose',age:17}
                    ],
                    searchName:'',
                    orderType: 0,    //0代表原本，1代表升序，2代表降序
                },
                computed:{
                    filterPersons(){
                        //取出相关数据
                        const {searchName,persons,orderType}=this 
                        //最终需要显示的数组
                        let fPersons;
                        //对persons进行过滤
                        fPersons=persons.filter(p=> p.name.indexOf(searchName)!==-1)
                        
                        //排序
                        if(orderType!==0){
                            fPersons.sort(function(p1,p2){    //返回负数P1在前，返回正数P2在前
                                //1代表升序，2代表降序
                                if(orderType===2){
                                    return p2.age-p1.age
                                }else{
                                    return p1.age-p2.age
                                }
                                return p2.age-p1.age
                            })
                        }
                        
                        return fPersons
                    }
                },
                methods:{
                    setOrderType(orderType){
                        this.orderType=orderType
                    }
                }
            })
        </script>
    </body>
</html>

你认识小汐吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue学习：列表的过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时，可以使用计算属性来返回过滤或排序后的数组，例如：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;列表渲染_过滤与排序&lt;/title&gt;
复制链接

扫一扫