vue 价格千位分隔符处理

最新推荐文章于 2024-05-14 10:48:15 发布

前端小白学习中....

最新推荐文章于 2024-05-14 10:48:15 发布

阅读量866

点赞数 1

分类专栏：封装文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_43305450/article/details/125503526

版权

封装专栏收录该内容

4 篇文章 0 订阅

订阅专栏

项目需求,实现数字金额千位分隔符格式.意思就是,比如后端返回的数字是24000.00,但是页面上要求我们展示成这种格式24,000.00;如下图:

可以新建一个commom.js,然后代码如下

    formatThousand(num) {
        if (num != null) {
            var res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
                return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
                    return $1 + ",";
                });
            })
            return res;
        };
        return num
    },

然后在main.js中引入commom.js

import Commom from './assets/js/common';

Vue.prototype.utils = Commom;

使用时只要在你想要使用的位置,直接调用就可以

    getProductManaLists(params) {
      if (params) {
        this.productManaParams[params.key] = params.value;
      }
      this.loading = true;
      this.$http.post(url接口地址, this.productManaParams).then((res) => {
        this.loading = false;
        res.records.forEach((item) => {
          item.suggestedRetailPrice = this.utils.formatThousand(item.suggestedRetailPrice);
        });
        this.listData = res.records;
        this.total = res.total;
        this.pages = res.pages;
      });
    },