皮卡教你 :vue全局过滤器与局部过滤器的使用

① 全局过滤器

定义好过滤器后可以在任何组件内使用

<div id="box">
      {{name|revers}}
    </div> 

Vue.filter('revers',function(a){
             console.log(a)			// a 传入的参数是name属性内的'大千世界'
            return a.split('').reverse().join('') //我们可以通过全局过滤器实现反转字符串 '界世千大'
        })
        var VM = new Vue({
            el:"#box",
            data:{
                name:'大千世界',
            },  
            }
        })

② 局部过滤器

局部过滤器,只能在当前组件中使用

<div id="box">
      {{name|abc}}
    </div> 

  var VM = new Vue({
            el:"#box",
            data:{
                age:18,
                name:'abc',
                content:'我叫龙哥,住隔壁',
                url:'www.itlong.top?(w,h)&cb=xxoo'
            },
            filters:{
                //局部过滤器,只能在当前组件中使用
                abc(a){
                     console.log(a)			// a 传入的参数是name属性内的'大千世界'
          		  return a.split('').reverse().join('') //我们可以也可以局过局部滤器实现反转字符串 '界世千大'
                }
            
            }
        })

总结:

当我们很多地方都需要这个功能的时候可以使用全局过滤器来完成,
但是当我们是组件独享功能时候就必须使用局部过滤器了.