vue基础实用小技巧 filter过滤器

前端小菜鸡一枚，总结项目中发现的小技巧，有什么不对和错误希望各位指出和补充，谢谢大家观看！
·························································································································
filter过滤器主要是用于过滤一些文字显示，日期显示等，比如很多字段或图片前缀要拼接url时，即可使用，可以定义全局或局部。

filter的定义

1. 全局定义

Vue.filter('add', function (value) {               //其中add是过滤器方法的名字  ，value为之前内容
    return value+'111111'                               // 过滤之后返回的内容
   })

全局定义推荐创建一个filter文件，便于修改
2. 局部定义

filters:{
add:function (value) {               //其中test是过滤器方法的名字  ，value为之前内容
    return value+'111'                               // 过滤之后返回的内容
   })
}

注意局部定义filters有s，没有s不生效，filters与data同级

在项目中使用

1. 在花括号内使用

{{  'ceshi' | add }}    //显示ceshi111

2. 在bind中使用

<div   :data="'ceshi'|add " > </div>

过滤器的参数及嵌套

1.嵌套使用

filters:{
add:function (value) {               //其中test是过滤器方法的名字  ，value为之前内容
  return value+'111'                               // 过滤之后返回的内容
 })
 add2:function(value){
 return value +'222'
}

{{  'ceshi' | add | add2   }}    //显示ceshi111222    会将第一次结果当值进入下阶段

2. 多参数

filters:{
add:function (value，v1,v2) {               //其中test是过滤器方法的名字  ，value为之前内容
    return v1+value +v2                           // 过滤之后返回的内容
   })


{{  'ceshi' | add ('111','222')   }}    //显示 111ceshi222    

今天起打卡博客了~欢迎小伙伴有问题交流，一起进步学习