Vue如何封装多个全局过滤器到一个文件


在写vue项目时,所用的过滤器很多时,把所有的过滤器方法封装在一个文件中,然后导出,并绑定在vue实例上。

1.在src下新建filters文件夹,并新建index.js。

2.在index.js中实现过滤器方法

import moment from 'moment'
const dateFormat = (input, fmtstring) => {
    // 使用momentjs这个日期格式化类库实现日期的格式化功能
    return moment(input).format(fmtstring);
}
const moneyFormat = value => {
    if (!value) return '0.00';
    var intPart = Math.floor(value); //获取整数部分
    var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+)/g, '1,'); //将整数部分逢三一断
    var floatPart = ".00"; //预定义小数部分
    var value2Array = value.split(".");
    //=2表示数据有小数位
    if (value2Array.length == 2) {
        floatPart = value2Array[1].toString(); //拿到小数部分
        if (floatPart.length == 1) { //补0,实际上用不着
            return intPartFormat + "." + floatPart + '0';
        } else {
            return intPartFormat + "." + floatPart;
        }
    } else {
        return intPartFormat + floatPart;
    }
}

export {
    dateFormat,
    moneyFormat
}

3.在main.js里面添加

import * as filters from './filters'
Object.keys(filters).forEach(key => {
	Vue.filter(key, filters[key])
})

4.在.vue里面使用

<span>{{item.add_time | dateFormat('YYYY-MM-DD HH:MM:SS')}}</span>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值