The first:
<template>
<div>
<!-- 排序 -->
<div class="list-sort">
<div>综合</div>
<div style="display: flex;align-items: center;">
<div @click="onSort">价格</div>
<div>
<div :class="{'active':isSort==1}" class="iconfont icon-jiantou"></div>
<div :class="{'active':isSort==2}" class="iconfont icon-jiantouxia"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
list:[],
isSort:0 //1为升序，2为降序
}
},
methods:{
onSort(){
//排序
if(this.isSort < 1){
this.isSort = 1
this.list.sort((a,b)=>{
return a.actualPrice -b.actualPrice
})
}else if(this.isSort == 1){
this.isSort = 2
this.list.sort((a,b)=>{
return b.actualPrice -a.actualPrice
})
}else if(this.isSort == 2){
this.isSort = 1
this.list.sort((a,b)=>{
return a.actualPrice -b.actualPrice
})
}
}
}
}
</script>
<style scoped>
.list-sort{
margin-top: 55px;
width: 100%;
height: 40px;
background-color: white;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 14px;
}
.iconfont{
font-size: 8px;
margin: 0 3px;
}
.active{
color: red;
}
</style>
The second type:
<template>
<div>
<!-- 排序 -->
<div class="list-sort">
<div>综合</div>
<div style="display: flex;align-items: center;">
<div @click="onSort">价格</div>
<div>
<div :class="{'active':isActive}" class="iconfont icon-jiantou"></div>
<div :class="{'active':onActive}" class="iconfont icon-jiantouxia"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data(){
return{
list:[],
isSort:false, //排序
isActive:false,
onActive:false,
on:false
}
},
methods:{
onSort(){
//排序
this.on = !this.on
if(this.on){
this.isActive = true
}else{
this.isActive = !this.isActive
}
if(this.on){
this.onActive = false
}else{
this.onActive = !this.onActive
}
this.isSort = !this.isSort
if(this.isSort){
this.list.sort((a,b)=>{
return a.Price - b.Price
})
}else{
this.list.sort((a,b)=>{
return b.Price - a.Price
})
}
}
}
}
</script>
<style scoped>
.list-sort{
margin-top: 55px;
width: 100%;
height: 40px;
background-color: white;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 14px;
}
.iconfont{
font-size: 8px;
margin: 0 3px;
}
.active{
color: red;
}
</style>