vue过滤器

2020-01-07  本文已影响0人  Fanny

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

<!-- 在双花括号中 -->
{{ 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)
    }
  }
}
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 的第一个参数传入,得到最终的结果

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

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

上一篇 下一篇

猜你喜欢

热点阅读