08前端项目----升序/降序

vue实现升序/降序

用vue实现升序/降序，以及css绘制三角形

<div class="sui-navbar"><div class="navbar-inner filter"><ul class="sui-nav"><li class="active"><a href="#">综合</a></li><li><a href="#" @click="sortByPrice">价格<i class="angle_top" :class="{active: priceSort === true}"></i><i class="angle_bottom" :class="{active: priceSort === false}"></i></a></li></ul></div>
</div>

<style>
.angle_top {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;
}.angle_bottom {width: 0;height: 0;display: block;border-style: solid;border-width: 6px 6px 0;border-color: #5e5e5e transparent transparent;position: absolute;bottom: 14px;right: 17px;
}
.angle_top.active, .angle_bottom.active {color: red; /* 高亮显示当前排序方向的箭头 */
}
</style>

• searchList的goodsList里面有price，根据价格排序；初次点击是升序，再次点击就是降序

data(){return{priceSort:null, //null:默认排序，true：升序；false:降序}
},
computed:{sortedGoodsList(){if(priceSort === null){return this.goodsList;}//在副本上修改数组，避免修改原始数据const sorted = [...this.goodsList];sorted.sort((a,b)=>{return this.priceSort?a.price-b.price:b.price-a.price;});return sorted;}
},
//点击价格按钮
merhods:{sortByPrice(){if(this.priceSort===null){this.priceSort = true;}else{this.priceSort = !this.priceSort;}}
}

<li class="yui3-u-1-5" v-for="good in sortedGoodsList" :key="good.id"><div class="list-wrap"><div class="p-img"><a href="item.html" target="_blank"><img :src="good.defaultImg" /></a></div><div class="price"><strong><em>¥</em><i>{{good.price}}.00</i></strong></div></div>
</li>

服务器处理

实际开发当中有大量的数据，通过上面的方法消耗性能。而且通常情况下需要分页和全局排序，前端无法实现全局价格排序，应该后端处理然后向后端请求数据

• 数据实时性和准确性：后端实时动态变化数据和处理，可返回前端最新数据
• 性能优化：后端排序+分页返回，避免浏览器内存溢出与卡顿
• 确保数据安全性

这里我用的是阿里巴巴的图标，不是手写的
可以在阿里巴巴选择图标然后复制图标的代码
在public/index里面引入图标css样式即可
<link rel="stylesheet" href="https:这里就是图标的代码">
如下在项目中使用（图标的名字分别是icon-up和icon-down）

  <li><a href="#" @click="sortByPrice">价格<span class="iconfont" :class="{'icon-up':isAsc,'icon-down':isDesc}"></span></a></li>

计算属性：
后端请求回来的数据searchParams里面有order字段，order属性值为字符串例如’asc’、‘desc’。只需要修改就行

data(){return{order : null//刚开始为默认}
},computed:{isAsc(){return this.searchParams.order.indexOf('asc')!==-1;},isDesc(){return this.searchParams.order.indexOf('desc')!==-1;},
}

点击价格触发函数

methods:{sortByPrice(){if( this.searchParams.order === 'desc'){this.searchParams.order = 'asc'}else{this.searchParams.order = 'desc'}//再次发送请求}
}