vue自定义过滤器 filter

• 过滤器就是一个数据经过了这个过滤器之后出来另一样东西。
• 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