【Vue2.0学习】— 列表排序（四十一）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType=2">年龄升序</button>
        <button @click="sortType=1">年龄降序</button>
        <button @click="sortType=0">原顺序 </button>
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}</li>
        </ul>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                sortType: '0', //0代表原序，2代表升序，1代表降序
                keyWord: '',
                persons: [{
                    id: '001',
                    name: '马冬梅',
                    age: 2,
                    sex: '女'
                }, {
                    id: '002',
                    name: '周冬雨',
                    age: 244,
                    sex: '女'
                }, {
                    id: '003',
                    name: '周杰伦',
                    age: 33,
                    sex: '男'
                }, {
                    id: '004',
                    name: ' 任嘉伦',
                    age: 99,
                    sex: '男'
                }]
            },
            // 使用 computed实现
            computed: {
                filPersons() {
                    const arr = this.persons.filter((p) => {
                        return p.name.indexOf(this.keyWord) !== -1

                    })

                    //判断是否排序
                    if (this.sortType) {
                        //p1-p2升序，p2-p1降序
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age


                        })
                    }
                    return arr

                }
            }

        })
    </script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

在这里插入图片描述

补充知识点：

sort排序

在这里插入图片描述

在这里插入图片描述
但是当我们对数字进行排序时，会出现问题，例：

在这里插入图片描述

这是为什么呢？

怎么没有起到效果（按大小排序），其实，sort方法会调用每个数组项的toString()方法，得到字符串，然后再对得到的字符串进行排序。虽然数值15比3大，但在进行字符串比较时"15"则排在"3"前面（ASCII字符顺序）。显然，这种结果不是我们想要的，这时，sort()方法的参数就起到了作用，我们把这个参数叫做比较函数。

sort()方法如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript
标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。 compareFunction(a, b)
必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

因此比较函数的格式要求如下：

function compare(a, b) {
  if (a < b ) {           
  // 按某种排序标准进行比较, a 小于 b
    return -1;
  }
  if (a > b ) {
    return 1;
  }
  // a与b相等
  return 0;
}

1
2
3
4
5
6
7
8
9
10
11
12

数字数组的比较函数

从小到大排列（升序排列）

function compareNumbers(a, b) {
  return a - b;
}
1
2
3

从大到小排列（降序排列）

function compareNumbers(a, b) {
  return b - a;
}
1
2
3

   var arr = [5, 16, 24, 7, 3];
        arr.sort(function(a, b) {
            return a - b;
        })
        console.log(arr)
1
2
3
4
5

在这里插入图片描述

var arr = [5, 16, 24, 7, 3];
        arr.sort(function(a, b) {
            return b - a;
        })
        console.log(arr)
1
2
3
4
5

在这里插入图片描述

相关阅读:
网络安全（黑客）自学
 【五分钟Paper】基于参数化动作空间的强化学习
 命令执行（rce）
angualr的脏值检测
 OpenHarmony开发-系统烧录
 flutter（学习日记篇-1）
Java之抽象类与接口
 The Seven Tools of Causal Inference with Reflections on Machine Learning 文章解读
 【工具】工具小集
 保护鲸鱼动物网页设计作业静态HTML宠物主题网页作业 DW鲸鱼网站模板下载大学生简单动物网页作品代码个人网页制作学生个人网页
原文地址：https://blog.csdn.net/m0_46374969/article/details/127350209