Vue大数字Filter转换方法

最新推荐文章于 2024-08-05 14:37:08 发布

BennettJeff

最新推荐文章于 2024-08-05 14:37:08 发布

阅读量656

点赞数

分类专栏： uni-app vue 文章标签：大数字转换金额单位 Vue filter 前端开发数值格式化

本文链接：https://blog.csdn.net/qq_34622811/article/details/122299626

版权

uni-app 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

首先在src目录下的filters文件夹中放置index.js 写入下面的方法

/**
 * 大数字转换，将大额数字转换为万、千万、亿等
 * @param value 数字值
 */
export function bigNumberTransform(value) {
  const newValue = ['', '', '']
  let fr = 1000
  let num = 3
  let text1 = ''
  let fm = 1
  while (value / fr >= 1) {
    fr *= 10
    num += 1
    // console.log('数字', value / fr, 'num:', num)
  }
  if (num <= 4) {
    // 千
    newValue[0] = parseInt(value / 1000) + ''
    newValue[1] = '千'
  } else if (num <= 8) {
    // 万
    text1 = parseInt(num - 4) / 3 > 1 ? '千万' : '万'
    // tslint:disable-next-line:no-shadowed-variable
    fm = text1 === '万' ? 10000 : 10000000
    if (value % fm === 0) {
      newValue[0] = parseInt(value / fm) + ''
    } else {
      newValue[0] = parseFloat(value / fm).toFixed(2) + ''
    }
    newValue[1] = text1
  } else if (num <= 16) {
    // 亿
    text1 = (num - 8) / 3 > 1 ? '千亿' : '亿'
    text1 = (num - 8) / 4 > 1 ? '万亿' : text1
    text1 = (num - 8) / 7 > 1 ? '千万亿' : text1
    // tslint:disable-next-line:no-shadowed-variable
    fm = 1
    if (text1 === '亿') {
      fm = 100000000
    } else if (text1 === '千亿') {
      fm = 100000000000
    } else if (text1 === '万亿') {
      fm = 1000000000000
    } else if (text1 === '千万亿') {
      fm = 1000000000000000
    }
    if (value % fm === 0) {
      newValue[0] = parseInt(value / fm) + ''
    } else {
      newValue[0] = parseFloat(value / fm).toFixed(2) + ''
    }
    newValue[1] = text1
  }
  if (value < 1000) {
    newValue[0] = value + ''
    newValue[1] = ''
  }
  return newValue.join('')
}

再需要使用的index.vue文件中引用

<template>
//download_count 是传入值 bigNumberTransform是filter中的方法
 <text style="color: #ff661d">{{ download_count | bigNumberTransform }}</text>
</template>