加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

vue 根据数组中某一项的值进行排序的方法

发布时间:2020-12-17 02:11:43 所属栏目:百科 来源:网络整理
导读:vue中数组和对象的排序 1数组排序 2对象排序 一、前言 我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。 二、代码 表格大概是这个样子,样式和图片在代码中简化了。 股票 script type="text/ecmascript-6" export defaul

vue中数组和对象的排序

1数组排序

  • 一、前言

    我在vue项目中遇到了一个表格排序的需求,根据某一项的值的大小从大到小调整数组顺序。

    二、代码

    表格大概是这个样子,样式和图片在代码中简化了。

    股票
    <script type="text/ecmascript-6">
    export default {
    data(){
    return{
    recommendlist: [
    { name:'高科石化',bn:'002778',in_price: 20.68,now_price: 28.68,increase: 10.01 },{ name:'中孚信息',bn:'300659',in_price: 19.46,now_price: 17.46,increase: 9.06 },{ name:'永福股份',bn:'300712',in_price: 17.68,now_price: 32.68,increase: 2.01 }
    ],sortType: 'in_price'
    }
    },methods: {
    sort(type) {
    this.sortType = type;
    this.recommendlist.sort(this.compare(type));
    // switch(type){
    // case 'in_price':
    // this.sortType = 'in_price';
    // this.recommendlist.sort(this.compare('in_price'));
    // break;
    // case 'now_price':
    // this.sortType = 'now_price';
    // this.recommendlist.sort(this.compare('now_price'));
    // break;
    // case 'increase':
    // this.sortType = 'increase';
    // this.recommendlist.sort(this.compare('increase'));
    // break;
    // }
    },compare(attr) {
    return function(a,b){
    var val1 = a[attr];
    var val2 = b[attr];
    return val2 - val1;
    }
    }
    }
    }

    1. 排序方法

    这里用到的是数组的sort方法,这个方法有一个需要注意的地方,就是不传参数的话,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。这并不是我们想要的排序方法,所以必须要传参。

    sort方法的参数是一个函数,这个函数提供了一个比较方法,要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。

    1. 若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
    2. 若 a 等于 b,则返回 0。
    3. 若 a 大于 b,则返回一个大于 0 的值。

    在代码中,compare函数中的匿名函数就是这样一个函数,但这个函数外面又嵌套了一层,这是因为需要根据数组中的某一项来排序,所以需要把这一项的key值传进来。

    2. 调用排序方法

    一开始我按照注释的部分写的,和我一样抽象能力不是特别好的人首先会想到要这样写,但是写出来之后发现三种情况不过是重复的代码,这时我就直接用最上面两行代码来代替,写完以后感觉内心一片平和。这种复用率高的代码简直让人太舒服了。

    三、结语

    虽然是一个简单的功能,但是非常值得归纳总结一下。希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    (编辑:李大同)

    【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

      推荐文章
        热点阅读