vue定義全局過濾器

一、定義全局過濾器

1、src下新建文件夾utils,下面新建filter.js

import Vue from 'vue'

// 個人中心-支付狀態
Vue.filter('paymentMethod', value => {
    switch (value) {
        case 1:
            return '微信支付'
        case 2:
            return '會員充值'
        case 3:
            return '錢包支付'
        default:
            return '其他'
    }
})

2、在main.js中引入使用

import '@/common/utils/filter.js';// 全局過濾器

3、使用

// 在雙花括號插值
{{ value | paymentMethod }}

二、filter過濾器（多參數）傳參

1、傳1個參數

// html
{{a1 | filterAa}}

// js
filters:{
  filterAa(a1){
    // a1是傳入的參數
  }
}

2、傳2個參數

// html
{{a1 | filterAa(a2)}}

// js
filters:{
  filterAa(a1,a2){
    // a1是傳入的第一個參數
    // a2是傳入的第二個參數
  }
}

3、傳3個參數

// html
{{a1 | filterAa(a2,a3)}}

// js
filters:{
  filterAa(a1,a2,a3){
    // a1是傳入的第一個參數
    // a2是傳入的第二個參數
    // a3是傳入的第三個參數
  }
}

三、過濾器在js中使用

this.$options.filters["thousand"](要處理的數據) 
this.$options.filters.formatDate(val);

注意：

1、 當有局部和全局兩個名稱相同的過濾器時候，會以就近原則進行調用，即：局部過濾器優先於全局過濾器被調用！

2、 一個表達式可以使用多個過濾器。過濾器之間需要用管道符“|”隔開。其執行順序從左往右。