Vue 数字千位分隔符_vue千分位分隔符-CSDN博客

本文链接：https://blog.csdn.net/m0_58893670/article/details/126511286

涉及的数据比较多，写一个过滤器，将所有的数据都过滤一下，挂载到全局，不需要每个页面引用了。

创建一个js文件，实现数字千位分隔符

export function numberToCurrencyNo(value) {
    if (!value) return 0
    // 获取整数部分
    const intPart = Math.trunc(value)
    // 整数部分处理，增加,
    const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    // 预定义小数部分
    let floatPart = ''
    // 将数值截取为小数部分和整数部分
    const valueArray = value.toString().split('.')
    if (valueArray.length === 2) { // 有小数部分
      floatPart = valueArray[1].toString() // 取得小数部分
      return intPartFormat + '.' + floatPart
    }
    return intPartFormat + floatPart
  }

引用挂载到全局

在 main.js 文件中引入

import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// 配置全局过滤器，实现数字千分位格式
Vue.filter('numberToCurrency', numberToCurrencyNo)

直接在页面使用

 <div class="total-num">{{totalNum | numberToCurrency}}</div>