vue 千分位过滤器

发布时间 2023-12-11 15:53:01作者: icey-Tang

image

1.创建numberToCurrency.js文件

// 千分符过滤器
export function numberToCurrencyNo(value) {
  if (!value) return 0 // 判断value 是否是以0开头的负数
  if (value < 0 && value > -1) {
    return value
  } else {
    // 将数值截取为小数部分和整数部分
    const valueArray = value.toString().split('.')
    // 获取整数部分
    const intPart = valueArray[0] // 整数部分处理,增加,
    const intPartFormat = intPart.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 预定义小数部分
    let floatPart = ''
    if (valueArray.length === 2) {
      // 有小数部分
      floatPart = valueArray[1].toString() // 取得小数部分
      return intPartFormat + '.' + floatPart
    }
    return intPartFormat + floatPart
  }
}

2.main.js导入

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

3.使用

<span>{{ cost | numberToCurrency }}</span>