vue 过滤器的使用

例子：过滤出表格中数字对应的支付状态，以及不同支付状态的对应的颜色

一、过滤对应的状态

1.在src目录下新建filters文件夹，新建filter.js

filter.js内容如下:

export default{
    /**
     * 支付状态
     * 1 未支付
     * 2 已支付
     * 3 已处理
     * 4 未处理
     */
    setPayStatus(status){
        switch (status){
            case 1:
                return '未支付'
            case 2:
                return '已支付'
            case 3:
                return '已处理'
            case 4:
                return '未处理'
            default:
                return '暂无处理'
        }
    }
}

2.在需要使用过滤器的页面引入当前js

import filterData from '@/filters/filter'

3.注册过滤器 

因为filter.js中是默认导入的，所以引入的时候不用去解构赋值，直接使用即可。

filters过滤器需要是对象，这里默认导出的就是一个对象，因此之间赋值给filters即可

4.使用

 

二、过滤对应的状态颜色

1.编写对应的颜色css

1. 编写过滤器

 

export default{
    /**
     * 支付状态
     * 1 未支付
     * 2 已支付
     * 3 已处理
     * 4 未处理
     */
 setPayStatus(status){
        switch (status){
            case 1:
                return '未支付'
            case 2:
                return '已支付'
            case 3:
                return '已处理'
            case 4:
                return '未处理'
            default:
                return '暂无处理'
        }
    },

    /**
     * 过滤支付对应颜色
     */

    setOrderColor(status){
        switch (status){
            case '未支付':
                return 'pay-fail'
            case '已支付':
                return 'pay-success'
            case '已处理':
                return 'not-do'
            case '未处理':
                return 'do'
        }
    }
}

先过滤出对应的状态，在根据对应的状态过滤出对应的颜色

 3.使用

展示效果