大家好,又见面了,我是你们的朋友全栈君。
Html部分:
<div class="text primary-text">
<span>合计:</span>
<span class="money">{
{totalMoney | numFilter}}</span>
</div>
Js部分:(注意toFixed方法只能用于数值型数据)
// 情况一:保留小数点后两位的过滤器,尾数四舍五入
filters: {
numFilter (value) {
let realVal = ''
if (!isNaN(value) && value!== '') {
// 截取当前数据到小数点后两位
realVal = parseFloat(value).toFixed(2)
} else {
realVal = '-'
}
return realVal
}
}
// 情况二:保留小数点后两位的过滤器,尾数不四舍五入(此处存在一个问题,当源数据小数点第三位为数字9,并且第四位会导致第三位进位的情况下,得到的最终数据仍然不是截取 eg: 3.1798 截取两位会变成3.18)
filters: {
numFilter (value) {
let realVal = ''
if (!isNaN(value) && value!== '') {
// 截取当前数据到小数点后三位
let tempVal = parseFloat(value).toFixed(3)
realVal = tempVal.substring(0, tempVal.length - 1)
} else {
realVal = '-'
}
return realVal
}
}
// 情况二:优化成如下方式,自行封装成一个公共函数,即用即调
filters: {
numFilter (value) {
return cutOutNum(value)
}
}
----- 将此函数封装在外部js中 -----
/**
* 对源数据截取decimals位小数,不进行四舍五入
* @param {*} num 源数据
* @param {*} decimals 保留的小数位数
*/
export const cutOutNum = (num, decimals = 2) => {
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 String(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 Number(tempNumB) === 0 ? 0 : tempNumB
}
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143256.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...