###### tags: `Vue` `店商網頁`
{%hackmd BJrTq20hE %}
# Vue店商網頁-依時間、價格排序
店商網頁最常出現在功能之一，通常是以由新到就排列、由價格到低排列。

到底要怎麼時做呢?

使用sort這個語法，針對資料的內容例如日期進行排列。

其中會使用到sort的compareFunction，[詳細資訊](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description)。
簡單的來說如果sort((a, b) => { return a-b})內return的數字為<0則a排在b之前、數字為>0則b排在a之前，數字為0時則看遊覽器的設定。

## 以價格為條件的排列

以guestShowProduct內的資料為排列的資料，其中的價格有兩種price與origin_price，所以必須要先比較要用哪一個資料(見範例第9行)，這裡選擇由比價格較低的資料進行排序，接者是把排列的條件寫入(見範例第10行)，下方的範例的b - a就是從高到低排列，如果沒有寫入條件的話字串預設以unicode排列，數字的話則會把0排在最前面，接者依照開頭數字1依序排列，如果開頭數字相同則以第二位數數字為依據排列，並不會由大到小或由小到大排列。

JS

data () {
    return {
      guestShowProduct: [],
    }
  },
methods: {
    sortHightToLow () {
      this.guestShowProduct.sort((a, b) => {
        if (a.price < a.origin_price) {
          return b.price - a.price
        } else if (a.price === a.origin_price) {
          return b.price - a.origin_price
        }
      })
    }
}

## 以日期為條件的排列

這裡比較特別的是下方範例第九行，資料內的create_at是數字所以可以依照第十行的備註思考，第九行的範例可以用在日期格式是字串例如"2022/01/25"不用透過Date.parse()轉為數字後才能比較，直接使用字串格式比較(日期格式要相同，不然可能會出錯)

JS

data () {
    return {
      showArticles: [],
    }
  },
methods: {
    sortNewToOld () {
      this.isLoadingPage = true
      this.showArticles.sort((a, b) => { return a.create_at < b.create_at ? 1 : -1 })
      // 也可以寫成 return a.create_at - b.create_at
      this.isLoadingPage = false
    }
}