vue 项目中使用filters过滤器

一.全局过滤器：

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

   //index.js
   export function gettType(typeId) {
       switch (typeId) {
           case 1:
               return "智能安防"
               break;
           case 2:
               return "智能家电"
               break;
           default:
               return "未知设备"
       }
   }
   
   

根据传入的参数进行处理，使用return返回处理后的数据

2. main.js里注册filter

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

3. 在组件中使用（message就是需要过滤器处理的数据）

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

二.组件过滤器（局部）：

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

上面有种写法有个需要注意的问题：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

三.过滤器的其它使用方法

1. 过滤器可以串联：

   {{ message | filterA | filterB }}
   

   在这个例子中，filterA 被定义为接收单个参数的过滤器函数，表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB，将 filterA 的结果传递到 filterB 中。

2. 过滤器是 JavaScript 函数，因此可以接收参数

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

   这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

3. 'a'和'b'分别作为参数传给filterB

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