前端vue过滤器的使用方法（全局和局部过滤器详解）

// 声明过滤器
Vue.filter("过滤器名称","回调函数")

    
    
    
    
    


    
        
{{msg}}
    

添加一个过滤器来将msg中的"NBA",替换为 "美国篮球联盟"

我们发现这时候只有一个关键字被替换了，其他两个没变，这时候我们可以通过正则表达式来处理

这时我们看到实现了我们需要的效果了

2.过滤器传参数

  在通过管道符号来使用过滤器的时候我们还可以传递参数过去，如下

传值效果实现了。

3.多个过滤器同时使用

  我们对一个信息处理的时候，可以同时使用多个管道符来调用多个过滤器来处理，如下

页面效果

4.何为全局过滤器

  接下来我们看看什么是全局过滤器，其实我们上面定义的过滤器就是全局过滤器，我们在页面中再增加一个div和一个Vue对象，

然后我们在第二个div中使用我们前面定义的过滤器来看看

通过以上效果我们也能看出来什么是全局的过滤器了，其实就是我们定义的过滤器可以被本页面中的多个Vue对象所使用

局部过滤器

  相对于全局过滤器来说，局部过滤器就是只能够定义这个过滤器的Vue对象可以使用，具体步骤如下:

使用局部过滤器和前面是一样的

通过页面效果我们发现在vm对象中定义的过滤器在vm2中绑定的div中是不可以使用的，只能在定义的Vue对象绑定的div中使用，这就是局部变量。
注意：如果全局过滤器和局部过滤器同名的情况话，会通过就近原则调用局部过滤器！