Vue.js 允許你自定義過濾器，可被用於一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示：
<!-- 在雙花括號中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>
組件中定義過濾器
你可以在一個組件的選項中定義本地的過濾器：
如下：
html代碼：
<div id="app">
<input type="text" v-model="message" /> {{message | capitalize }} </div>
JS代碼：
var vm=new Vue({ el:"#app", data:{ message:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
全局定義過濾器
Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) })
過濾器函數總接收表達式的值 (之前的操作鏈的結果) 作為第一個參數。在上述例子中，capitalize 過濾器函數將會收到 message 的值作為第一個參數。
Vue.filter()
語法：Vue.filter( id, [definition] )
參數：
{string} id{Function} [definition]
用法：注冊或獲取全局過濾器。
// 注冊 Vue.filter('my-filter', function (value) { // 返回處理后的值 }) // getter，返回已注冊的過濾器 var myFilter = Vue.filter('my-filter')
串聯過濾器
{{ message | filterA | filterB }}
在這個例子中，filterA 被定義為接收單個參數的過濾器函數，表達式 message 的值將作為參數傳入到函數中。然后繼續調用同樣被定義為接收單個參數的過濾器函數filterB，將 filterA 的結果傳遞到 filterB 中。
過濾器是 JavaScript 函數，因此可以接收參數：
{{ message | filterA('arg1', arg2) }}
這里，filterA 被定義為接收三個參數的過濾器函數。其中 message 的值作為第一個參數，普通字符串 'arg1' 作為第二個參數，表達式 arg2 的值作為第三個參數。