基礎
類似於自定義指令,可以用全局方法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組件學習教程進行學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。