Vue的过滤器filter

最新推荐文章于 2024-09-05 13:30:00 发布

小铁匠95

最新推荐文章于 2024-09-05 13:30:00 发布

阅读量679

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_40431896/article/details/121469993

版权

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