Vue.js中過濾器（filter）的使用

 

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

首先，過濾器可在new Vue實例前注冊全局的，也可以在組件上寫局部。

全局過濾器：

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

  return value + "!!!"

})

 <div id="app">
            <p>{{ msg | msgFormat}}</p>
        </div>

        <script>
            // 定義一個 Vue 全局的過濾器，名字叫做  msgFormat
            Vue.filter('msgFormat', function(msg) {
                // 字符串的  replace 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則
                return msg.replace(/單純/g, 'xx')
            })
        </script>

 

 

組件過濾器（局部）：

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