vue自定义过滤器以及全局定义过滤器的方法

• 自定义过滤器

html部分

 

     
支付方式：
     
{{item.paymentMethod | paymentMethod}}
 

js部分

var vm=new Vue({
    el:"#app",
    data:{
        msg:''
    },
    filters: {
      paymentMethod: function (value) {
         switch (value) {
             case 1:
             return '微信支付'
             case 2:
            return '钱包支付'
            default:
            return '其他'
         }
      }
    }
})

• 全局过滤器
  1、首先在src目录下新建一个filters文件夹并在文件夹里面新建index.js文件存放过滤器方法
  
  2、在index.js中写全局过滤器方法

import Vue from 'vue'

//个人中心-支付状态
Vue.filter('paymentMethod', value => {
    switch (value) {
        case 1:
            return '微信支付'
        case 2:
            return '会员充值'
        case 3:
            return '钱包支付'
        default:
            return '其他'
    }
})

//服务订单列表状态提示
Vue.filter('server_orderStatus', value => {
    switch (value) {
        case 0:
            return '待评估'
        case 1:
            return '待支付'
        case 2:
            return '待服务'
        case 3:
            return '待评价'
        case 4:
            return '已完成'
        default:
            return ''
    }
})

3、在main.js中全局引入过滤器

4、在需要使用过滤器的页面直接使用即可

 

     
支付方式：
     
{{item.paymentMethod | paymentMethod}}