过滤器,过滤东西呗.
把一个值丢进过滤器,然后过滤器对此值进行过滤.返回过滤后的数据.
Vue过滤器分全局过滤器和组件过滤器.
全局过滤器.
定义
// 第一个参数是需要过滤的数据.
// 第二个参数是给过滤器传递的值.
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>
注意,过滤器在插值表达式里使用 lunix 命令行的管道语法.
{{ oldValue | global-filter }}
把 oldValue 的值原封不动的传递给 global-filter.
在 global-filter 方法定义里,第一个参数 val 就是 oldValue
结果:
过滤结果
当然,过滤器本来就是一个方法,方法肯定是可以传参数的.
Vue.filter('global-filter',(val,...args)=>{[图片上传中...(15445114994941.jpg-9fecae-1544511784154-0)]
args.forEach(item=>{
val += ` ${item} - `
})
return val + ' 过滤器追加的数据'
})
<div id='app'>
<p>{{oldValue | global-filter(1,2,3,4,5)}}</p>
</div>
结果
给过滤器传递参数
组件过滤器
全局过滤器通过 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
}
}
})
除了使用范围不同,全局过滤器和组件过滤器没有任何其他的区别.
