Vue实现升序降序

最新推荐文章于 2024-04-18 19:50:41 发布

原创最新推荐文章于 2024-04-18 19:50:41 发布 · 4k 阅读

4 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在 Vue.js 应用中实现数据的升序和降序排列，通过实例代码展示了如何操作数组及 Vue 的 computed 属性来动态更新视图，帮助开发者更好地理解和应用 Vue 的数据绑定特性。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06_列表渲染_过滤与排序</title>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    </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.title}}--{{p.price}}
                </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:{
                    goodsListArr:[
                        {id:1, imgUrl:"goods1.png", title:"汤品一品酸菜400g*5袋（赠500g手工鲜 薯粉条 3.9分值）", price:31.50, sellNum:63},
                        {id:2, imgUrl:"goods1.png", title:"汤品一品酸菜400g*5袋（赠500g手工鲜 薯粉条 3.9分值）", price:34.50, sellNum:61},
                        {id:3, imgUrl:"goods1.png", title:"汤品一品酸菜400g*5袋（赠500g手工鲜 薯粉条 3.9分值）", price:36.50, sellNum:62},
                    ],
                    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,goodsListArr,orderType}=this 
                        //最终需要显示的数组
                        let fPersons;
                        //对persons进行过滤
                        fPersons=goodsListArr.filter(p => {
                            return p;
                        })
                        console.log(fPersons);
                        //排序
                        if(orderType!==0){
                            fPersons.sort(function(p1,p2){    //返回负数P1在前，返回正数P2在前
                                //1代表升序，2代表降序
                                if(orderType===2){
                                    return p2.price-p1.price
                                }else{
                                    return p1.price-p2.price
                                }
                                return p2.price-p1.price
                            })
                        }
                        
                        return fPersons
                    }
                },
                methods:{
                    setOrderType(orderType){
                        this.orderType=orderType
                    }
                }
            })
        </script>
    </body>
</html>