实现升序降序功能（Vue、CSS）
生活随笔
收集整理的這篇文章主要介紹了
实现升序降序功能（Vue、CSS）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一、Vue實(shí)現(xiàn)排序功能組件：升序、降序
效果圖：
封裝組件：
<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>在頁面上調(diào)用：
<template><base-sort :name="'次數(shù)'" :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實(shí)現(xiàn)升序、降序圖標(biāo)
效果圖：
代碼實(shí)現(xiàn)：
<!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">價(jià)格<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; }));總結(jié)
以上是生活随笔為你收集整理的实现升序降序功能（Vue、CSS）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【檀越剑指大厂—SpringCloudA
- 下一篇： DXP设计PCB过程中批量修改元件符号大