此筆記關於filter的官方文件的一些講解及個人的一些拓展

簡單介紹一下過濾器，顧名思義，過濾就是一個數據經過了這個過濾之後出來另一樣東西，可以是從中取得你想要的，或者給那個資料新增點什麼裝飾，那麼過濾器則是過濾的工具。例如，從['abc','abd','ade']陣列中取得包含‘ab’的值，那麼可通過過濾器篩選出來‘abc’和‘abd’；把‘Hello’變成‘Hello World’，那麼可用過濾器給值‘Hello’後面新增上‘ World’；或者把時間節點改為時間戳等等都可以使用過濾器。

首先，過濾器可在new Vue例項前註冊全域性的，也可以在元件上寫區域性。

全域性過濾器：

Vue.filter('globalFilter', function (value) {

  return value + "!!!"

})

元件過濾器（區域性）：

filters:{

    componentFilter:function(value){

          return value + "!!!"

    }

  },

上面有種寫法有個需要注意的問題：全域性註冊時是filter，沒有s的。而元件過濾器是filters，是有s的，這要注意了，雖然你寫的時候沒有s不報錯，但是過濾器是沒有效果的

簡單介紹了一下過濾器的寫法，後面會結合用法有更詳細的講解，下面我們來講一下過濾器的使用方法。

用法有二：

一，在雙花括號插值

{{ 'ok' | globalFilter }}

二，在v-bind表示式中使用

<div v-bind:data="'ok' | globalFilter" ></div>

上面簡單介紹了一下過濾器的呼叫，那麼接下來我們講解一下過濾器的引數寫法

一、{{ message | filterA | filterB }}

上述程式碼中，message是作為引數傳給filterA 函式，而filterA 函式的返回值作為引數傳給filterB函式，最終結果顯示是由filterB返回的。

二、

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

上述程式碼中，filterA的第一個引數是message，依次是‘arg1’,arg2

三、 {{ 'a','b' | filterB }}

上述程式碼表示'a'和'b'分別作為引數傳給filterB

簡單的做了個筆記，小可愛們，有什麼不同看法和詳解可以留言~