Vue排序功能

最新推荐文章于 2024-07-24 09:05:41 发布

小破孩呦

最新推荐文章于 2024-07-24 09:05:41 发布

阅读量5.8k

点赞数 2

分类专栏： Vue总结前端开发知识

本文链接：https://blog.csdn.net/qq_38543537/article/details/96428374

版权

前端开发知识同时被 2 个专栏收录

81 篇文章 2 订阅

订阅专栏

Vue总结

55 篇文章 6 订阅

订阅专栏

先看效果图：

HTML部分

<div>
     <el-button @click="toggleSort('money', false)" type="primary">从小到大</el-button>
     <el-button @click="toggleSort('money', true)" type="primary">从大到小</el-button>
     <div v-for="item in testpage2"></div>
     <div v-for="item in sortList">{{ item.num }}</div>
</div>

通过toggleSort点击事件并传递参数来控制排序

JS部分

export default {
        data(){
            return{
                sortList:[{num:'5'},{num:'88'},{num:'43'},{num:'56'},{num:'28'},{num:'61'},{num:'9'}],
                d_sort:'',       //默认不排序
                newSort:false,//默认小大到大排列
            }
        },
        computed:{
            //排序
            testpage2: function(){
                var _this = this;
                var arrByZM = []; //声明新的数组用来存储排序的数据
                if(_this.d_sort != ''){
                    _this.sortList.sort(function( a , b){
                         if(_this.newSort){
                              return b.num - a.num;
                         }else{
                              return a.num - b.num;
                         }
                    });
                }
                //返回排序后的数据
                return arrByZM;
            },
        },
        methods:{
            //排序
            toggleSort(d_sort,newSort){
                this.d_sort = d_sort;
                this.newSort = newSort;
            },
        }
}

通过computed计算属性来监听排序的变化，并返回最新的排序数组

至此排序完成，以上是完整的排序方法