Vue.js过滤器filter的使用

概念:

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

filter的调用方式:

{{ name | nameope }}

全局filter的定义语法:

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

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

例:

{{ name | nameShow }}

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

过滤器的传参:

{{ name | nameShow( ' msg' ) }}

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

过滤器也可以串写多个:

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

{{ name | nameShow( ' msg' ) | nameTest}}

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 + ' 私有过滤器 '
  }
}

你可能感兴趣的:(Vue.js过滤器filter的使用)