Vue.js过滤器filter的使用

概念：

• Vue.js允许自定义过滤器，可被用作一些常见的文本格式化。
• 过滤器可以用在两个地方：mustache插值和v-bind表达式。
• 过滤器应该被添加在javaScript表达式的尾部，由“管道”符指示

filter的调用方式：

{{ name | nameope }}

全局filter的定义语法：

过滤器中的function，第一个参数已经被规定死了，永远都是过滤器管道符前面传递过来的数据 如下的name

Vue.filter( ' 过滤器名称 ' , function (data) { } )

例：

<p>{{ name | nameShow }}</p>

Vue.filter( ' nameShow ' , function (data) { 
  return name + ' 123 '
} )

过滤器的传参：

<p>{{ name | nameShow( ' msg' ) }}</p>

Vue.filter( ' nameShow ' , function (data,msg) { 
  return name + msg
} )

过滤器也可以串写多个：

过滤器串写之后从前往后执行 然后把结果显示出来

<p>{{ name | nameShow( ' msg' ) | nameTest}}</p>

Vue.filter( ' nameShow ' , function (data,msg) { 
  return name + msg
} )
Vue.filter( ' nameTest ' , function (data) { 
  return name + 666
} )

定义私有过滤器

定义私有过滤器需要两个条件： 过滤器名称 和 处理函数
在Vue实例中添加对象filters:{ },与data同级,然后直接写处理函数就可以
如果私有过滤器和全局过滤器名称一致，优先调用私有过滤器

data:{},
mehods:{}
filters:{
  nameShow(){
    return name + ' 私有过滤器 '
  }
}