Vue.js 自定義過濾器

自定義過濾器

為了方便使用，Vue.js 允許使用者通過簡(jiǎn)單的方式來自定義過濾器，即，利用管道 “ | ” 來完成過濾。

基礎(chǔ)

類似于自定義指令，可以用全局方法 Vue.filter() 注冊(cè)一個(gè)自定義過濾器，它接收兩個(gè)參數(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)換它。不過也可以定義一個(gè)過濾器，在把來自視圖（<input> 元素）的值寫回模型之前轉(zhuǎn)化它：

Vue.filter('currencyDisplay', {
  // model -> view
  // 在更新 `<input>` 元素之前格式化值
  read: function(val) {
    return '$'+val.toFixed(2)
  },
  // view -> model
  // 在寫回?cái)?shù)據(jù)之前格式化值
  write: function(val, oldVal) {
    var number = +val.replace(/[^\d.]/g, '')
    return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
  }
})

示例：

{% raw %}

new Vue({ el: '#two-way-filter-demo', data: { money: 123.45 }, filters: { currencyDisplay: { read: function(val) { return '$'+val.toFixed(2) }, write: function(val, oldVal) { var number = +val.replace(/[^\d.]/g, '') return isNaN(number) ? 0 : parseFloat(number.toFixed(2)) } } }})

{% endraw %}

動(dòng)態(tài)參數(shù)

如果過濾器參數(shù)沒有用引號(hào)包起來，則它會(huì)在當(dāng)前 vm 作用域內(nèi)動(dòng)態(tài)計(jì)算。另外，過濾器函數(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ǎn)單，也可以用表達(dá)式達(dá)到相同的結(jié)果，但是對(duì)于更復(fù)雜的邏輯——需要多于一個(gè)語句，這時(shí)需要將它放到計(jì)算屬性或自定義過濾器中。

內(nèi)置過濾器 filterBy 和 orderBy，根據(jù)所屬 Vue 實(shí)例的當(dāng)前狀態(tài)，過濾/排序傳入的數(shù)組。