实现升序降序功能（Vue、CSS）

一、Vue实现排序功能组件：升序、降序

效果图：

封装组件：

<template><div class="sort-box" @click="changeSort"><div :style="{ cursor: isCursor }">{{ name }}</div><div class="sort-con"><div class="s-item" :class="{ active: currentDesc == item.name }" v-for="(item, index) in sortIconList" :key="index"><i :class="`iconfont ${item.icon}`"></i></div></div></div>
</template><script>
export default {name: 'BaseSort',props: {currentDesc: {type: String,required: true,default: '',},name: {type: String,default: '',},isCursor: {type: String,default: 'pointer',},},data() {return {isActive: 0,sortIconList: [{name: 'asc',icon: 'icon-shengxu',},{name: 'desc',icon: 'icon-jiangxu',},],}},methods: {changeSort(index) {this.$emit('changeSort', this.currentDesc)},},created() {},watch: {},
}
</script><style lang="scss" scoped>
.sort-box {display: flex;align-items: center;
}
.sort-con {.s-item {cursor: pointer;position: relative;i {font-size: 13px;}&.active {i {color: #67e5ff;}}}.s-item:first-child {height: 14px;}
}
</style>

在页面上调用：

<template><base-sort :name="'次数'" :currentDesc="currentDesc" @changeSort="changeSort"></base-sort>
</template>
<script>
export default {data() {return{currentDesc: 'desc',}},methods:{changeSort(val) {this.currentDesc = val === 'asc' ? 'desc' : 'asc'},}
}
</script>

二、CSS实现升序、降序图标

效果图：

代码实现：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.on {border-bottom: 2px solid #e61773;width: 150px;height: 40px;display: table-cell;position: relative;}.on a {display: block;overflow: hidden;width: 100%;height: 30px;line-height: 30px;text-align: center;color: #5e5e5e;}.angle_top {content: '';width: 0;height: 0;display: block;border-style: solid;border-width: 0 6px 6px;border-color: transparent transparent #5e5e5e;position: absolute;transform: rotate(180deg);bottom: 14px;right: 17px;}.angle_bottom {content: '';width: 0;height: 0;display: block;border-style: solid;border-width: 0 6px 6px;border-color: transparent transparent #5e5e5e;position: absolute;top: 10px;right: 17px;}</style>
</head>
<body><div class="on"><a href="javascript:void(0)" data-category="price" data-orderby="asc" class="js_category">价格<i class="angle_top"></i><i class="angle_bottom"></i></a>
</div>
</body>
</html>

三、升序降序逻辑（JS的sort方法）

var arr = [1,55,33,44,11,99,10,44];
// 降序
console.info(arr.sort(function(a, b) {return b - a;
}));
// 升序
console.info(arr.sort(function(a, b) {return a - b;
}));
// 升序
arr2 = [{sort: 21},{sort: 12},{sort: 33},{sort: 14},{sort: 55}];
console.info(arr2.sort(function(a, b) {return a.sort - b.sort;
}));

实现升序降序功能（Vue、CSS）相关推荐

jquery 点击实现升序降序图标切换
(本文适合小白/学渣,适合不想动脑子只想复制黏贴的) 需求: 有一个查询结果,返回的是表格的形式,点击表头任何一列,都能实现升序/降序的UI变换,同时表格内容该列也升序降序排列.支持分页. 实现步骤: ...
先用总分升序再用计算机降序,怎样用升序降序给EXCEL排名
怎样用升序降序给EXCEL排名 (2008-12-14 16:35:01) 标签: 电脑单元格数据清单 h2 if 教育在用Excel制作相关的数据表格时,我们可以利用其强大的排序功能,浏览.查 ...
java升序降序排列desc,TreeMap升序|降序排列和按照value进行排序
TreeMap 升序|降序排列 import java.util.Comparator; import java.util.TreeMap; public class Main { public st ...
SQL语句基础排序单列排序多列排序升序降序基础操作符 where语句 between 高级操作符 AND操作符 OR操作符 IN 和 NOT IN 优先级 Like操作符模糊匹配 %
基础排序: 单列排序: 前面我们学习了数据的查询,查询出来的数据没有特定的顺序,要将查询出来的数据排序,我们可是使用ORDER BY语句: 例如我们将年龄按照升序排列: select age from ...
html table表头升序降序,jquery实现表格根据字段进行升序降序
例子: 蚂蚁部落 * { margin: 0; padding: 0; } body { padding: 100px; } .select { position: relative; display ...
python中升序降序问题_飘逸的python - 有的升序有的降序的情况下怎么多条件排序...
之前在统计导出各区服玩家消费的时候需要进行升序降序混搭的多条件排序. 需求是这样的.区服从小到大排,如果区服相同,则按消费从大到小排. 实现方法是利用python的sort算法是稳定排序,对数据进行多 ...
C# List.sort排序详解(多权重,升序降序)
很多人可能喜欢Linq的orderBy排序,可惜U3D里面linq在Ios上会报错,所以就必须使用list的排序. 其实理解了并不难升序降序比较 sort有三种结果 1,-1,0分别是大,小,相等. ...
Java的Comparator排序（升序降序）理解
Java的Comparator排序(升序降序)理解 int compare(T o1, T o2); 这里o1表示位于前面的对象,o2表示后面的对象返回-1(或负数),表示不需要交换01和02的位置 ...
java treemap value排序_Java TreeMap升序|降序排列和按照value进行排序的案例
TreeMap 升序|降序排列 import java.util.Comparator; import java.util.TreeMap; public class Main { public st ...

实现升序降序功能（Vue、CSS）

一、Vue实现排序功能组件：升序、降序

二、CSS实现升序、降序图标

三、升序降序逻辑（JS的sort方法）

实现升序降序功能（Vue、CSS）相关推荐

最新文章

热门文章