Vue的計算屬性(computed)除了可以直接調用值,還可以進行排序操作。下面將介紹Vue的計算屬性(computed)如何進行數組排序。
data: { items: [ { name: 'Apple', price: 10 }, { name: 'Banana', price: 5 }, { name: 'Orange', price: 8 } ] }, computed: { sortedItems() { return this.items.sort((a, b) =>a.price - b.price) } }
在上面的例子中,我們創建一個items數組,其中包含三個對象,每個對象具有名稱和價格屬性。sortedItems計算屬性使用sort()方法將items數組根據價格屬性進行升序排序。然后,我們可以使用sortedItems而不是items數組進行渲染。
- {{ item.name }} - ${{ item.price }}
渲染結果將顯示為:
- Banana - $5
- Orange - $8
- Apple - $10
在Vue中使用計算屬性(computed)進行數組排序能夠大大簡化代碼,并在需要動態排序數據時非常方便。快速鍵入數組排序程序而不是每次需要它時編寫自己的排序功能。