一.全局過濾器：

1. src目錄下新建filters目錄，filters目錄里新建index.js文件

   //index.js
   export function gettType(typeId) {
       switch (typeId) {
           case 1:
               return "智能安防"
               break;
           case 2:
               return "智能家電"
               break;
           default:
               return "未知設(shè)備"
       }
   }
   
   

根據(jù)傳入的參數(shù)進行處理，使用return返回處理后的數(shù)據(jù)

2. main.js里注冊filter

   import * as filters from './filters' // 全局過濾器
   // 全局注冊過濾器
   Object.keys(filters).forEach(key => {
   Vue.filter(key, filters[key])
   })
   

3. 在組件中使用（message就是需要過濾器處理的數(shù)據(jù)）

   <!-- 在雙花括號中 -->
   {{ message | capitalize }}
   
   <!-- 在 `v-bind` 中 -->
   <div v-bind:id="rawId | formatId"></div>
   

二.組件過濾器（局部）：

filters:{
    componentFilter:function(value){
         return value + "!!!"
    }
  },

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

三.過濾器的其它使用方法

1. 過濾器可以串聯(lián)：

   {{ message | filterA | filterB }}
   

   在這個例子中，filterA 被定義為接收單個參數(shù)的過濾器函數(shù)，表達式 message 的值將作為參數(shù)傳入到函數(shù)中。然后繼續(xù)調(diào)用同樣被定義為接收單個參數(shù)的過濾器函數(shù) filterB，將 filterA 的結(jié)果傳遞到 filterB 中。

2. 過濾器是 JavaScript 函數(shù)，因此可以接收參數(shù)

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

   這里，filterA 被定義為接收三個參數(shù)的過濾器函數(shù)。其中 message 的值作為第一個參數(shù)，普通字符串 'arg1' 作為第二個參數(shù)，表達式 arg2 的值作為第三個參數(shù)。

3. 'a'和'b'分別作為參數(shù)傳給filterB

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