zoukankan      html  css  js  c++  java
  • 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';
        /原来用的是Number(value).toFixed(0),这样取整时有问题,例如0.51取整之后为1,感谢Nils指正/
        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])
    })
    
    1. 在.vue文件中就可以直接使用了

    <span>({{item.add_time | dateFormat('YYYY-MM-DD HH:MM:SS')}})</span>
    
  • 相关阅读:
    获得SQL语句的模板,自己写类似readtrace时候用
    我的HD2手机
    匹配symbols
    再送一次书
    微软急聘MOSS高手!
    邮件规则的实现
    System.Data.SQLClient.SqlConnection在Open之后为什么需要及时Close?
    windbg中无法加载mscorwks.dll, Win32 error 0n2
    Diablo3狗熊榜
    软件构架师的特点
  • 原文地址:https://www.cnblogs.com/wenqiangit/p/10537317.html
Copyright © 2011-2022 走看看