基礎
類似於自定義指令，可以用全局方法 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前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。