Vue过滤器 filter

1.Vue.filter(id,[definition])

  • 参数:
    {string} id
    {Function} [definition]
  • 用法:注册或获取全局过滤器
// 注册
Vue.filter('my-filter',function(value) {
  // 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

2.示例:
(1)全局过滤器

Vue.filter('globalFilter',function(value){
  return value + "!!!"
})

(2)组件过滤器

filters: {
  componentFilter: function(value){
    return value + '!!!'
  }
}
基本用法:

(1) 双括号插值:

{{ 'wang' | globalFilter }}

(2)在v-bind表达式中使用

{{ 'wang' | globalFilter }}
过滤器参数写法:

(1){{message | filterA | filterB}}

{{ '2022' | filterA | filterB}}
filters: {
  filterA: function(value){
    return value + '年'
  },
  filterB: function(value){
    return value + 'hello!'
  }
}


// 2022年hello!

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

<div>{{ '2022' | filterA('11','22')}}</div>  
...
filters: {
  filterA: function(value,arg1,arg2){
    return value + '-' + arg1 + '-' + arg2
  }
}

// 2022-11-22
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 根据Vue 官方给出的解释,过滤器是可被用于一些常见的文本格式化的东西。过滤器可以在两个地方被使用,一个是在双花括...
    虚竹_d36e阅读 236评论 0 0
  • vue官网过滤器 Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号...
    辶开呀阅读 211评论 0 0
  • 此笔记关于filter的官方文档的一些讲解及个人的一些拓展 简单介绍一下过滤器,顾名思义,过滤就是一个数据经过了这...
    chenjieyi阅读 174,044评论 21 62
  • vue中可以自定义过滤器,用于{{插槽}}和v-bind表达式。 全局定义(1) 全局方法 Vue.filter(...
    北风吹_yfy阅读 345评论 0 1
  • Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bin...
    莫伊剑客阅读 123评论 0 0