vue过滤器

在vue.js中可以自定义过滤器用于一些常见的文本格式化,过滤器可以用在胡子语法和v-bind表达式,过滤器是javascript 函数,由管道符号 |表示

• 在template 中的使用

<!-- 在双花括号中 -->
{{ message | capitalize }}
> message 作为 capitalize过滤器的第一个参数

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

• 局部过滤器 ( 在组件内部定义 )

export default {
  filters:{
      capitalize: function (value) {
        if (!value) return ''
         value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}

• 全局过滤器 ( 在main.js中定义 )

Vue.filter(' capitalize ', function(val){ 
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
 })

new Vue{ ( ... ) }

如果全局的过滤器与局部的过滤器重名了,有限使用局部的过滤器

• 过滤器也可以串联:

{{ message | filterA | filterB }}

message作为过滤器filterA的第一个参数传入,出来过后得到的结果作为filterB 的第一个参数传入,得到最终的结果

• 过滤器是javascript 函数,可以接受参数

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

这里表示filterA可以接受三个参数, message 是第一个,arge1 第二个 , arge2 第三个