vue自定义过滤器–千分符过滤器

vue自定义过滤器–千分符过滤器

  • 最近更新2017年10月24日

1.写过滤器,在main.js定义过滤器,红色为过滤器颜色

Vue.filter('formatNumber', function(value = '0', currencyType = '') {
    let res;
    if (value.toString().indexOf('.') === -1) {
        res = (value || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.00'
    } else {
        let prev = value.toString().split('.')[0]
        let next = value.toString().split('.')[1] < 10 ? value.toString().split('.')[1] + '0' : value.toString().split('.')[1]
        res = (prev || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + '.' + next
    }
    return currencyType + res
});

2.在你需要用的地方这样用

<td>{{shop_tatolPrice | formatNumber }}</td>

3.上面是直接写在main.js中,如果你不想写在main.js,想写在一个单独的js,比如:formatNum.js存放在filterjs文件夹,js内容和用法不变,需要在引用的页面引入这个过滤器

,在使用的页面加上一句。

import fliter from '/filterjs/formatNum';

不需要写成formatNum.js,直接写formatNum。

注:另附加一个格式化字符串长度的过滤器

Vue.filter("strFormat",function (value) {
    if(value==undefined || value=='') {
        return '';
    }
    if(value.length > 10) {
        return value.substring(0, 10) + '...';
    }
    return value;
});
分享到 :
相关推荐

Vue中img的src属性绑定正确方法

不少人在vue的开发中遇到这样一个问题:img的src属性绑定url变量,然而图片[...

Vue基于access_token鉴权的 退出实现

前端使用Vue,前后端鉴权是基于access_token,根基id生成access_...

Vue2.0初探

(一)、安装基本的环境1、全局安装vue-clinpminstallvue[&hel...

Vue异步上传图片数据绑定失败解决方法

Vue异步上传图片数据绑定失败解决方法业务概述:页面加载调用后台方法获取数据(后台[...

发表评论

登录... 后才能评论