Vue.js每天必學之過濾器與自定義過濾器

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

基礎

類似於自定義指令,可以用全域性方法 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元件學習教程進行學習。

相關文章

前端開發 最新文章