过滤器是对即将显示的数据做进一步的筛选处理,然后显示,过滤器并没有改变原来的数据,只是在原数据的基础上产生新的数据
vue中的过滤器分为两种:局部过滤器和全局过滤器
全局过滤器
全局过滤器通过 Vue.filter('filtername',fliterFn) 来定义,它定义好了之后,在所有的组件内都可以使用
// 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>
局部过滤器
局部过滤器,定义在组件内部 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不报错,但是过滤器是没有效果的
使用位置
- 在双花括号插值
{{ 'ok' | globalFilter }}
- v-bind表达式中使用
<div v-bind:data="'ok' | globalFilter" ></div>
- 过滤器的连用
{{ message | filterA | filterB }}