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。