定義兩個按鈕

<div id="showGoods"><button @click="upchange">升序</button><button @click="downchange">降序</button></div> <div id="showGoods"><button @click="upchange">升序</button><button @click="downchange">降序</button><div> <!-- 商品組件--><new-ul :item="listinfo"></new-ul></div></div>

vue

let vm = new Vue({ el: "#showGoods", data: {listinfo: null; //獲取到后臺提供的值},methods: {upchange() {//寫法一this.listinfo.sort((a,b)=>{//排序基于的數(shù)據(jù)return a.price - b.price;})},downchange() {//寫法二function sortData(a, b) {return b.price - a.price;} this.listinfo.sort(sortData);}} })

?

總結(jié)

以上是生活随笔為你收集整理的Vue升序降序（前端价格排序）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。