vue從入門到進階：過濾器filters（五）

風雨後見彩虹發表於2018-01-12
Vue過濾器Filter

Vue.js 允許你自定義過濾器，可被用於一些常見的文字格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

元件中定義過濾器

你可以在一個元件的選項中定義本地的過濾器：
如下：
html程式碼：

<div id="app">
 <input type="text" v-model="message" />
 {{message | capitalize }}
</div>

JS程式碼：

var vm=new Vue({
    el:"#app",
    data:{
        message:``
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ``
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
})

全域性定義過濾器

Vue.filter(`capitalize`, function (value) {
  if (!value) return ``
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

過濾器函式總接收表示式的值 (之前的操作鏈的結果) 作為第一個引數。在上述例子中，capitalize 過濾器函式將會收到 message 的值作為第一個引數。

Vue.filter()

語法：Vue.filter( id, [definition] )
引數：

  • {string} id
  • {Function} [definition]

用法：註冊或獲取全域性過濾器。

// 註冊
Vue.filter(`my-filter`, function (value) {
  // 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter(`my-filter`)

串聯過濾器

{{ message | filterA | filterB }}

在這個例子中，filterA 被定義為接收單個引數的過濾器函式，表示式 message 的值將作為引數傳入到函式中。然後繼續呼叫同樣被定義為接收單個引數的過濾器函式 filterB，將 filterA 的結果傳遞到 filterB 中。

過濾器是 JavaScript 函式，因此可以接收引數：

{{ message | filterA(`arg1`, arg2) }}

這裡，filterA 被定義為接收三個引數的過濾器函式。其中 message 的值作為第一個引數，普通字串 `arg1` 作為第二個引數，表示式 arg2 的值作為第三個引數。

相關文章