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}