前端小菜鸡一枚,总结项目中发现的小技巧,有什么不对和错误希望各位指出和补充,谢谢大家观看!
·························································································································
filter过滤器主要是用于过滤一些文字显示,日期显示等,比如很多字段或图片前缀要拼接url时,即可使用,可以定义全局或局部。
filter的定义
- 全局定义
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同级
在项目中使用
- 在花括号内使用
{{ 'ceshi' | add }} //显示ceshi111
- 在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 会将第一次结果当值进入下阶段
- 多参数
filters:{
add:function (value,v1,v2) { //其中test是过滤器方法的名字 ,value为之前内容
return v1+value +v2 // 过滤之后返回的内容
})
{{ 'ceshi' | add ('111','222') }} //显示 111ceshi222
今天起打卡博客了~欢迎小伙伴有问题交流,一起进步学习