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

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;
});
本站的文章多是老王开发工作中问题的记录,一个字一个字敲的,切实可行,可以分享,需要留个原文链接,至少也意思意思吧!
vsalw技术博客! » vue自定义过滤器–千分符过滤器

每个人都是以自己独特的方式体味生活,或许别人不理解,但自己知道:其中的酸甜苦辣就叫做幸福!

认同! 瞎扯淡!