引言

Vue.js 是一個輕量級的 JavaScript 框架，旨在幫助開發者快速創建高品質的 Web 應用程式。自 Vue.js 推出以來，其社群和生態系統持續增長，讓開發者能夠利用各種功能進行數據的格式化與展示。其中，过滤器（Filters）是一個非常實用的功能，可以幫助開發者輕鬆地對數據進行格式化，使其更加易於閱讀。

什麼是过滤器？

在 Vue.js 中，过滤器是一種用於格式化輸出數據的工具。你可以使用过滤器來處理字符串、數字等數據類型，使其符合特定的顯示需求。例如，你可以將數字轉換為貨幣格式，或是將字符串轉換為大寫等。

如何使用过滤器

1. 定義过滤器

要在 Vue 中使用过滤器，你需要定義一個过滤器函數，並將其註冊為全局过滤器。以下是定義一個名為「currency」的过滤器的範例：


Vue.filter('currency', function (value) {
  if (!value) return '';
  return '$' + value.toFixed(2);
});

2. 在模板中使用过滤器

定義完过滤器後，你可以在 Vue 的模板中使用它，例如：



{{ price | currency }}

以上代碼將會把「price」變量的值轉換為貨幣格式，並顯示在頁面上。

3. 过滤器參數

你還可以在过滤器中添加參數，讓它的功能更加靈活。以下是添加參數的範例：


Vue.filter('currency', function (value, currencySymbol) {
  if (!value) return '';
  return currencySymbol + value.toFixed(2);
});

在模板中使用時，你可以指定參數，如下所示：



{{ price | currency('¥') }}

這段代碼將會把「price」變量的值轉換為日元格式，並顯示在頁面上。

常見錯誤及排除

在使用过滤器時，可能會遇到一些常見問題，例如：

  • 未定義的值：如果傳入的值為 null 或 undefined，請確保在过滤器中進行檢查，避免出現錯誤。
  • 格式不正確：確保傳入的數字格式正確，以便可以進行正確的格式化。

延伸應用

除了數字格式化，过滤器還可以用於以下場景：

  • 日期格式化：將日期轉換為可讀格式。
  • 字符串處理：處理和修改字符串，如首字母大寫、去除空格等。

總結

Vue.js 的过滤器是一個強大的功能，可以幫助開發者輕鬆地格式化數據，從而提升應用程式的可讀性和用戶體驗。通過定義和使用过滤器，你可以在模板中輕鬆地處理數據，滿足更多顯示需求。

Q&A（常見問題解答）

1. 如何在 Vue 3 中使用过滤器？

在 Vue 3 中，过滤器已被移除，建議使用計算屬性或方法來達到類似的功能。

2. 过滤器能否鏈接使用？

是的，你可以將多個过滤器鏈接使用，在模板中按順序使用它們來處理數據。

3. 过滤器可以接受多個參數嗎？

可以，过滤器可以接受多個參數，只需在函數中進行相應的處理即可。

更新日期：2025/06/01

—

Categorized in:

vuevue.js

Tagged in:

,