在 Day18介紹插件時有提到，能透過插件來定義一個過濾器，那我們今天就來教大家如何製作一個過濾器吧。

自定義過濾器，我們常用來針對較為普遍文字重製，來客製化一個過濾器(在Angular叫做管道Pipe)。

而寫好的過濾器可以放在那些地方呢?1.{{插值綁定}}2.v-bind表示式

{{ message | capitalize }}
// or..
<div v-bind:id="rawId | formatId"></div>

過濾器的註冊方式可以在元件內透過選項filters局部定義，也可以在vue實例之前全局定義，當然也可以透過插件添加(參考Day18)。

// component option: filters 
export default {
    name:'demo',
    filters: {
      capitalize (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
}

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

new Vue({
  // code...
})

過濾器也可以串聯使用:

{{ message | filterA | filterB }}

甚至於可以接參數，這裡，filterA被定義為接收三個參數的過濾器函數。其中message的值作為第一個參數，普通字符串'arg1'作為第二個參數，表達式arg2的值作為第三個參數。

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

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang