vue过滤器-filter

简单介绍一下过滤器

过滤器就是一个数据经过了过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。

过滤器分为全局过滤器，和局部过滤器。
全局过滤器：

Vue.filter('globalFilter',()=>{
	return value +'!!!'
})

组件过滤器（局部）

filters:{
	componentFilter(val){
		return val +'!!!'
	}
}

注：上面这种写法需要注意的问题是全局注册时是filter,没有s的。而组件过滤器是filters,是有S的，这里要注意，虽然你写不的时候没有s不报错，但是过滤器是没有效果的。

过滤器方法定义好了，再详细介绍一下使用方法：

使用一：在双花括号插值

{{'ok' | globalFilter}}

使用二：在v-bind表达式中使用

<div v-bind:data="'ok' | globalFilter"></div>

过滤器的参数使用：

参数使用一：

{{message | filterA | filterB}}

message是作为参数传给filterA函数，而filterA函数的返回值作为参数传给filterB函数，最终结果显示由filterB返回。

<div>{{'2018' | filterA | filterB}}</div>

filters:{
filterA(val){return value +'年 '}，
filterB(val){return value + ‘Hello World’}
}

输出结果： 2018年 Hello World

参数使用二：

{{message| filterA(arg1, arg2)}}

filterA的第一个参数是message, 依次是arg1,arg2

<div>{{'2021' | filterA('05','11')}}</div>

filters:{
filterA(val,arg1,arg2){return value + ‘-’ +arg1 + ‘-’+arg2}，
}

结果： 2021-05-11

参数使用三：

{{'a','b' | filterB}}

<div>结果：{{'Hello'，'World' | filterB}}</div>

filters:{
filterB(val1,val2){return val1 + ’ '+ val2}，
}

结果：Hello World

补充：（20210528）
从vue3.0开始过滤器已删除，不再支持
相反，我们建议用方法调用或计算属性替换它们。

<template>
<h1>bank account balance</h1>
<p>{{accountInUSD}}</p>
</template>
<script>
	export default{
	props:{
	accountBalance:{
	type:Number,
	required:true
},
computed:{
	accountInUSD(){
	return '$' + this.accountBalance
}
}
}
</script>

迁移策略
我们建议用计算属性或者方法代替过滤器，而不是使用过滤器。
全局过滤器
如果在应用中全局注册过滤器，那么在每一个组件中用计算属性或者方法调用来替换它们可能就没那么方便了。
相反，你可以通过全局属性在所有组件中使用它。

main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
	currentUSD(value){return '$'+value}
}

然后你可以通过$filters对象修改所有的模板，像下面这样：

<template>
<h1>bank account balance</h1>
<p>{{$filters.currencyUSD(accountBalance)}}</p>
</template>

注意这种方式只能用于方法中，不可以在计算属性中使用，因为后者只有在单个组件的上下文中定义时才有意义 。