vue中的初始排序

来源:互联网 发布:2016全国各地上牌数据 编辑:程序博客网 时间:2024/06/06 02:24

初学vue,照着demo一点点的敲。今天刚好敲到vue中的过滤排序filter 官方demo中有这么一例。

<ul id="demo1">
    <li v-for="n in even(numbers)">{{n}}</li>
</ul>

var vm1 = new Vue({
    el:"#demo1",
    data:{
        numbers:[1,2,3,4,5]
    },
    methods:{
        even:function(numbers){
            return this.numbers.filter(function(number){
                return number%2 === 0;
            })
        }
    }

显示一个数组的过滤或排序副本,不实际改变或重置原始数据,起到过滤的作用。然后就想到在methods中写个方法初始排序。

<ul id="demo2">
    <li v-for="n in even(numbers)">{{n}}</li>
</ul>


var vm2 = new Vue({
    el:"#demo2",
    data:{
        numbers:[2,1,7,4,3]
    },
    methods:{
        even:function(numbers){
            var i = 0;
            var j = numbers.length - 1;
            var Sort = function(i, j) {
                // 结束条件
                if (i == j) {
                    return
                }
                var key = numbers[i];
                var stepi = i; // 记录开始位置
                var stepj = j; // 记录结束位置
                while (j > i) {
                    // j <<-------------- 向前查找
                    if (numbers[j] >= key) {
                        j--;
                    } else {
                        numbers[i] = numbers[j];
                        //i++ ------------>>向后查找
                        while (j > ++i) {
                            if (numbers[i] > key) {
                                numbers[j] = numbers[i];
                                break;
                            }
                        }
                    }
                }
                // 如果第一个取出的 key 是最小的数
                if (stepi == i) {
                    Sort(++i, stepj);
                    return;
                }
                // 最后一个空位留给 key
                numbers[i] = key;


                // 递归
                Sort(stepi, i);
                Sort(j, stepj);
            };
            Sort(i, j);
            return numbers;
        }
  
    }
});

刚开始时,当我方法中传入的参数与v-for绑定方法的参数不一致时,一直报错,但是不影响排序结果。最后改成一致时控制台就不报错了。

0 0
原创粉丝点击