当前位置：首页 > news >正文

VUE--保留小数（过滤器）

news 2025/8/16 23:51:51

1.cutOutNum.js

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.调用

<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>