vue过滤器

• 过滤器就是一个数据经过了这个过滤器之后出来另一样东西。
• vue中的过滤器分为两种：局部过滤器和全局过滤器

全局过滤器

// global-filter是过滤器名称
// 函数第一个参数是需要过滤的数据.
// 函数第二个参数是给过滤器传递的值.
Vue.filter('global-filter',(val,...args)=>{
console.log(`需要过滤的数据是:${val}`)
return val + ' 过滤器追加的数据'
})


var app = new Vue({
el: '#app',
data: {
price:null,
oldValue: '原始数据'
})
123456789101112131415
 <div id='app'>
<p>{{oldValue | global-filter}}</p>
</div>
123
{{ oldValue | global-filter }}`把 `oldValue` 的值原封不动的传递给 `global-filter
1

在 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
}
}
})
12345678910111213141516171819

• 注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

使用位置

1 . 在双花括号插值

{{ 'ok' | globalFilter }}
1

2 .在v-bind表达式中使用

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

3 .滤器的连用

{{ message | filterA | filterB }}
1

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

如下:

  <div id="app">
{{'2020'|dateFilter|lastFilter}}
</div>

123
new Vue({
el:'#app',
data:{

},
filters: {
lastFilter(val){
console.log(arr);
  return val+'年';
},
lastFilter(val){
return val+'好';
}
}
})
1234567891011121314151617181920

结果是：

2020年好

4 .过滤器参数

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

上述代码中，filterA的第一个参数是message，依次是‘arg1’,arg2

<div>{{'2020'|filterA('12','22')}}</div>


filters:{
filterA(val,arg1,arg2){
return val+'-'+arg1+'-'+arg2;
}
}
12345678

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

<div>{{'hello','world'|filterA}}</div>

filters:{
filterA(arg1,arg2){
return arg1+arg2;
}
}
1234567

结果是：

hello world
1