VUE--保留小数(过滤器)

1.cutOutNum.js

javascript 复制代码
export const cutOutNum = (num, decimals) => {
  if (isNaN(num) || (!num && num !== 0)) {
    return "-";
  }

  function toNonExponential(_num) {
    var m = Number(_num)
      .toExponential()
      .match(/\d(?:\.(\d*))?e([+-]\d+)/);
    return Number(_num).toFixed(Math.max(0, (m[1] || "").length - m[2]));
  }

  // 为了兼容科学计数法的数字
  num = toNonExponential(num);
  // 获取小数点的位置 + 1(不存在小数点的indexOf值为-1)
  const pointIndex = String(num).indexOf(".") + 1;
  // 获取小数点后的个数(需要保证有小数位)
  const pointCount = pointIndex ? String(num).length - pointIndex : 0;

  // 补零函数
  function zeroFill(zeroNum, num) {
    for (let index = 0; index < zeroNum; index++) {
      num = `${num}0`;
    }
    return num;
  }
  // 源数据为"整数"或者小数点后面小于decimals位的作补零处理
  if (pointIndex === 0 || pointCount <= decimals) {
    let tempNumA = num;
    // 区分"整数"和"小数"的补零
    if (pointIndex === 0) {
      tempNumA = `${tempNumA}.`;
      tempNumA = zeroFill(decimals - pointCount, tempNumA);
    } else {
      tempNumA = zeroFill(decimals - pointCount, tempNumA);
    }
    return Number(tempNumA) === 0 ? 0 : tempNumA;
  }

  // 截取当前数据到小数点后decimals位
  const Int = String(num).split(".")[0];
  const Decimal = String(num).split(".")[1].substring(0, decimals);
  const tempNumB = `${Int}.${Decimal}`;

  // 需求:数据为0时,需要显示为0,而不是0.00...
  return tempNumB;
};

2.调用

javascript 复制代码
<template>
  <div>
    {{ total | numFilter }}
  </div>
</template>

<script>
import { cutOutNum } from "@/util/cutOutNum";
export default {
  data() {
    return {
      total: 2.3334,
    };
  },
  filters: {
    numFilter(value) {
      return cutOutNum(value, 3);
    },
  },
  methods: {

  },
};
</script>

<style>
</style>
相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊2 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^3 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
IT瘾君4 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪5 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程5 小时前
如何测试短信接口
java·服务器·前端