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