Vue 中使用 filters 實作資料格式化及資料過濾的技巧

Vue.js 是一款流行的 JavaScript 框架，它提供了許多實用的功能和工具來幫助前端開發人員開發優秀的應用程式。其中，filters（過濾器）是 Vue.js 中一個非常有用的功能，它可以用於資料的格式化和過濾。

在 Vue 中，filters 相當於模板中的管道，可以用來處理資料和轉換。例如，我們可以使用 filters 把日期格式從原始日期字串轉換為人類友善的日期格式，或是把數字格式化成貨幣格式。

在本文中，我們將介紹一些 Vue 中使用 filters 實現資料格式化及資料過濾的技巧，讓你的應用程式變得更加優雅和易於維護。

1. 建立 filter

在 Vue 中，我們可以透過 Vue.filter 方法來建立一個 filter。此方法需要兩個參數：過濾器的名字和具體的處理函數。例如：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

以上程式碼建立了一個名為 capitalize 的 filter，它將字串的第一個字元轉換為大寫字母。該filter 可以在模板中使用：

<div>{{ message | capitalize }}</div>

2. 處理數組

當我們有一個數組需要處理時，可以使用filter 方法來過濾或轉換數組中的數據。例如：

Vue.filter('excludeSpaces', function (arr) {
  return arr.filter(function (item) {
    return item.indexOf(' ') < 0
  })
})

以上程式碼建立了一個名為 excludeSpaces 的 filter，它將過濾陣列中包含空格的元素。該 filter 可以在模板中使用：

<div>{{ ['Hello World', 'Vue Developer', 'Goodbye'] | excludeSpaces }}</div>

輸出結果為：["Vue Developer", "Goodbye"]。

3. 處理日期

在Vue 中，我們可以使用moment.js 函式庫來處理日期，也可以使用自訂filters 來格式化日期。

下面是一個使用filters 格式化日期的範例：

Vue.filter('formatDate', function (value) {
  if (value) {
    return moment(String(value)).format('MM/DD/YYYY hh:mm')
  }
})

以上程式碼建立了一個名為formatDate 的filter，它將日期格式化為 MM/DD/YYYY hh:mm 的格式。該 filter 可以在模板中使用：

<div>{{ date | formatDate }}</div>

4. 處理數字

在 Vue 中，我們可以使用 filters 來格式化數字。以下是將數字轉換為貨幣格式的範例：

Vue.filter('formatPrice', function (value) {
  if (!value) return ''
  let val = (value / 1).toFixed(2).replace(',', '.')
  return '$' + val.toString().replace(/B(?=(d{3})+(?!d))/g, ',')
})

以上程式碼建立了一個名為 formatPrice 的 filter，它將數字格式化為貨幣格式。該 filter 可以在模板中使用：

<div>{{ price | formatPrice }}</div>

5. 結合計算屬性

在 Vue 中，我們可以結合計算屬性和 filters，進一步擴展 filters 的功能。例如：

Vue.filter('uppercase', function (value) {
  if (!value) return ''
  return value.toString().toUpperCase()
})

Vue.filter('length', function (value) {
  if (!value) return ''
  return value.length
})

new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  computed: {
    upperMessage () {
      return this.message | uppercase
    },
    messageLength () {
      return this.message | length
    }
  }
})

以上程式碼使用 uppercase 和 length 兩個 filters，在計算屬性中對資料進行處理和轉換。

在範本中使用：

<div>{{ upperMessage }}</div>
<div>{{ message | uppercase | length }}</div>
<div>{{ messageLength }}</div>

以上程式碼最終輸出結果為：

HELLO VUE
9
9

6. 總結

Vue 中的filters 功能非常強大，可以用於資料的格式化和過濾，並且還可以結合計算屬性來進一步擴展功能。在實際開發中，利用 filters 可以大幅簡化程式碼的複雜度，提高程式碼的可維護性和可讀性。如果你在使用 Vue 過程中還沒有使用 filters，不妨試試看！

以上是Vue 中使用 filters 實作資料格式化及資料過濾的技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！