Vue排序功能

先看效果图：

HTML部分

     从小到大
     从大到小
     

     
{{ item.num }}

通过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计算属性来监听排序的变化，并返回最新的排序数组

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