# js如何实现升序和降序
# 快速导航
# 前言
在网页中,实现列表的升序和降序,是一个比较常见的操作,尤其是在做一些数据栓选表格的时候,按照索引,时间等特定的参数,提供升序和降序排列的功能的
# 具体示例
- 小王-语文-90
- 小红-语文-79
- 小李-语文-71
- 小白-语文-85
# 原生js
在原生js
中主要是操作DOM
,遍历节点,通过removeChild()
删除节点,而使用appendChild()
添加元素去实现的
代码如下所示
// 排序
function sort() {
// 获取父级元素DOM
var ul = document.getElementsByTagName('ul')[0];
// 判断是否包含子元素
if(ul.hasChildNodes()) {
var len = ul.childNodes.length; // 子元素的个数
var arr = []; // 新数组变量用于存储节点
for(var i = 0; i<len;i++) {
arr[i] = ul.childNodes[0]; // 把节点存入数组
ul.removeChild(ul.childNodes[0]); // 从第一个元素开始删除
}
// 倒过来遍历所有的节点,降序
for(var i = len-1;i>=0;i--) {
ul.appendChild(arr[i]); // 添加到ul为子元素
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
如下是html
结构
<ul>
<li>小红-1</li>
<li>张三-3</li>
<li>李四-4</li>
<li>王五-5</li>
</ul>
<input type="button" onclick="sort()" value="降序或升序" />
1
2
3
4
5
6
7
2
3
4
5
6
7
# 分析
上面的示例是先把容器html
内容清空,最后,把数组的数据以倒排序的方式遍历并填充到之前的ul
容器里面
使用原生js方式就是要遍历DOM
节点,然后依赖DOM
对象的属性或方法操作DOM
的
# Vue版本实现
在Vue
里面是操作数据,结合数组的sort
方法一个简单的方法就可以实现的,原生js
想要实现同样类似的效果,那就得不断的去查找DOM
节点,操作节点实现的
<template>
<div class="wrap">
<div>
<ul>
<li v-for="(item,index) in lists" :key="index">{{item.name}}-{{item.lan}}-{{item.chengji}}</li>
</ul>
</div>
<div class="btn">
<el-button type="primary" @click="handleJiangxu">降序</el-button>
<el-button type="primary" @click="handleShengxu">升序</el-button>
</div>
</div>
</template>
<script>
export default {
name: 'ascendDes',
data() {
return {
lists: [
{
name: '小王',
lan: '语文',
chengji: 90
},
{
name: '小红',
lan: '语文',
chengji: '79'
},
{
name: '小李',
lan: '语文',
chengji: '71'
},
{
name: '小白',
lan: '语文',
chengji: '85'
}
]
}
},
methods: {
// 降序
handleJiangxu() {
this.lists = this.lists.sort((a, b) => a.chengji - b.chengji).reverse() // 反转一下
},
// 升序
handleShengxu() {
this.lists = this.lists.sort((a,b)=>a.chengji-b.chengji);
}
}
}
</script>
<style lang="scss" scoped>
.wrap {
text-align: center;
}
.btn {
margin-top: 20px;
}
</style>
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
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
使用vue
实现,发现就很简单,使用sort(a,b)
方法,其中a
代表前一个数,b
代表后一个数,做一个差值,就可以判断哪个大,哪个小的
分享
留言
解答
收藏