2025 最新版：如何在 Vue 中使用过滤器格式化輸出

Vue.js 是一個輕量級的 JavaScript 框架，可以讓開發者快速開發出功能強大的 Web 應用程式。本文將介紹如何使用 Vue.js 的过滤器功能來格式化輸出資料，以便更好地展示給用戶。

什麼是过滤器？

过滤器是一種功能，能夠對輸出的資料進行格式化處理，使其更加易讀。例如，您可以使用过滤器將日期格式化為更友好的格式，或將數字轉換為貨幣格式。

如何在 Vue 中使用过滤器？

在 Vue.js 中，您可以定義自己的过滤器以格式化輸出。以下是使用过滤器的完整步驟：

1. **定義过滤器**：在 Vue 實例中定義一個过滤器。


Vue.filter('formatDate', function (value) {
  if (!value) return '';
  return new Date(value).toLocaleDateString('zh-TW', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
});

2. **在模板中使用过滤器**：您可以在 Vue 模板中直接使用过滤器來格式化資料。



{{ date | formatDate }}

上面的程式碼會將 `date` 變量中的日期格式化為如「2025年6月1日」的易讀格式。

延伸應用：更多过滤器示例

除了日期，您還可以定義其他类型的过滤器，例如將數字轉換為貨幣格式：


Vue.filter('currency', function (value) {
  if (isNaN(value) || value === null) return '';
  return 'NT$' + value.toFixed(2);
});

在模板中使用：



{{ price | currency }}

這樣可以將 `price` 變量格式化為如「NT$100.00」的輸出。

錯誤排除

在使用过滤器時，如果發現輸出不正確，檢查以下幾點：

– 確保數據格式正確，特別是日期和數字。
– 確認过滤器名拼寫正確。
– 確認 Vue 實例正確載入。

總結

Vue.js 的过滤器功能非常強大，讓開發者能夠更靈活地處理輸出資料，並提升用戶體驗。透過定義和使用过滤器，您可以輕鬆地將資料轉換為更易於理解的格式，讓您的應用程式更具吸引力。

Q&A（常見問題解答）

1. 过滤器是否可以鏈接使用？

是的，您可以在模板中鏈接多個过滤器，例如：`{{ price | currency | discount }}`，這樣可以實現複雜的格式化需求。

2. 如何在組件中使用过滤器？

在 Vue 組件中使用过滤器的方法與在 Vue 實例中相同，您只需在模板中使用过滤器即可。

3. 过滤器能否接受參數？

是的，您可以為过滤器傳遞參數，例如：`{{ date | formatDate(‘YYYY-MM-DD’) }}`，這需要在定义过滤器时处理参数。

—

Categorized in:

vuevue.js

Tagged in:

,