- 过滤器就是一个数据经过了这个过滤器之后出来另一样东西。
- vue中的过滤器分为两种:
局部过滤器
和全局过滤器
- 全局过滤器
-
// global-filter是过滤器名称 // 函数第一个参数是需要过滤的数据. // 函数第二个参数是给过滤器传递的值. Vue.filter('global-filter',(val,...args)=>{ console.log(`需要过滤的数据是:${val}`) return val + ' 过滤器追加的数据' })
var app = new Vue({ el: '#app', data: { price:null, oldValue: '原始数据' })
<div id='app'> <p>{{oldValue | global-filter}}</p> </div>
{{ oldValue | global-filter }}把 oldValue 的值原封不动的传递给 global-filter
在 global-filter 方法定义里,第一个参数 val 就是 oldValue
局部过滤器(组件过滤器)
全局过滤器通过 Vue.filter('filtername',fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用.
局部过滤器,定义在组件内部 filters 属性上.它只能在此组件内部使用.
var app = new Vue({ el: '#app', data: { price:null, oldValue: '原始数据' }, methods: {}, // 定义组件过滤器 filters: { priceFmt(val,location) { switch(location) { case 'usa': return '$' + val break default: return val } } })
- 注意:全局注册时是
filter
,没有s的。而组件过滤器是filters
,是有s的,这要注意了,虽然你写的时候没有s不报错
,但是过滤器是没有效果
的 -
1 . 在双花括号插值
{{ 'ok' | globalFilter }}
2 .在v-bind表达式中使用
-
<div v-bind:data="'ok' | globalFilter" ></div>
3 .滤器的连用
-
{{ message | filterA | filterB }}
上述代码中,message是作为参数传给filterA 函数,而filterA 函数的返回值作为参数传给filterB函数,最终结果显示是由filterB返回的。
如下:
<div id="app"> {{'2020'|dateFilter|lastFilter}} </div>
new Vue({ el:'#app', data:{ }, filters: { lastFilter(val){ console.log(arr); return val+'年'; }, lastFilter(val){ return val+'好'; } } })
结果是:
2020年好
4 .过滤器参数
{{ message | filterA('arg1', arg2) }}
上述代码中,filterA的第一个参数是message,依次是‘arg1’,arg2
<div>{{'2020'|filterA('12','22')}}</div> filters:{ filterA(val,arg1,arg2){ return val+'-'+arg1+'-'+arg2; } }
5 .
{{ 'a','b' | filterB }}
-
<div>{{'hello','world'|filterA}}</div> filters:{ filterA(arg1,arg2){ return arg1+arg2; } }
结果是:
hello world
vue自定义过滤器 filter
最新推荐文章于 2024-07-04 10:07:27 发布
本文介绍了Vue.js中的全局过滤器和局部过滤器的定义、使用方法,包括全局filter的注册、组件内部filters的定义,并通过实例展示了如何在模板中调用和组合过滤器。重点讲解了过滤器参数传递和多参数处理,以及如何正确区分全局与局部过滤器的使用场景。
摘要由CSDN通过智能技术生成