vue中filter函數的用法

Vue.js 的 filter 函數用於格式化數據，在視圖中以特定格式顯示，可接收轉換函數作為參數。用法：{{ value | filterName }}。可串聯多個 filter，自訂 filter 可在實例或全域註冊。

Vue.js 中filter 函數的用法

問題： Vue.js 中filter 函數的用法是什麼？

解答：
Vue.js 的 filter 函數用於對資料進行格式化處理，在視圖中以特定的格式顯示。它接收一個函數作為參數，該函數將輸入值轉換為所需的輸出值。

用法：

<code class="html">{{ value | filterName }}</code>

其中：

• #value 是要格式化的資料值。
• filterName 是已註冊的 filter 函數的名稱。

範例：

將數字轉換為貨幣格式：

<code class="html">{{ price | currency }}</code>

將日期格式化為dd/mm/yyyy：

<code class="html">{{ date | date('dd/mm/yyyy') }}</code>

註冊自訂filter：

<code class="javascript">Vue.filter('capitalize', function(value) {
  if (!value) return '';
  return value.charAt(0).toUpperCase() + value.slice(1);
});</code>

上面定義了一個名為capitalize 的filter 函數，將第一個字母大寫。

注意：

• filter 函數只在視圖中起作用，不會修改資料本身。
• 可以使用 Vue.js 的管道運算子 (|) 串連多個 filter。
• 可以在 Vue 實例或全域註冊自訂 filter。

以上是vue中filter函數的用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！