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: '原始数据' 

})


<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