基礎
類似於自定義指令，可以用全局方法Vue.filter() 註冊一個自定義過濾器，它接收兩個參數：過濾器ID 和過濾器函數。過濾器函數以值為參數，返迴轉換後的值：
Vue.filter('reverse', function (value) { return value.split('').reverse().join('')})<!-- 'abc' => 'cba' --><span v-text="message | reverse"></span>
過濾器函數可以接收任意數量的參數：
Vue.filter('wrap', function (value, begin, end) { return begin + value + end})<!-- 'hello' => 'before hello after' --><span v-text="message | wrap 'before' 'after'"></span>
雙向過濾器
目前我們使用過濾器都是在把來自模型的值顯示在視圖之前轉換它。不過也可以定義一個過濾器，在把來自視圖（<input> 元素）的值寫回模型之前轉化它：
Vue.filter('currencyDisplay', { // model -> view // 在更新`<input>` 元素之前格式化值read: function(val) { return '$'+val.toFixed(2) }, // view -> model // 在寫回數據之前格式化值write: function(val, oldVal) { var number = +val.replace(/[^/d.]/g, '') return isNaN(number) ? 0 : parseFloat(number.toFixed(2)) }})動態參數
如果過濾器參數沒有用引號包起來，則它會在當前vm 作用域內動態計算。另外，過濾器函數的this 始終指向調用它的vm。例如：
<input v-model="userInput"><span>{{msg | concat userInput}}</span> Vue.filter('concat', function (value, input) { // `input` === `this.userInput` return value + input})上例比較簡單，也可以用表達式達到相同的結果，但是對於更複雜的邏輯――需要多於一個語句，這時需要將它放到計算屬性或自定義過濾器中。
內置過濾器filterBy 和orderBy，根據所屬Vue 實例的當前狀態，過濾/排序傳入的數組。
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
關於vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。