html:
<!-- 无参数 ,页面显示 19.98-->
<div>{
{19.9866666|formatNum_mod}}</div>
<!-- 需要传参数 ,页面显示 19.9866-->
<div>{
{19.9866666|formatNum_mod(4)}}</div>
js:
//vue 文件中,js部分
import { formatNum_mod } from '@/utils/public'
export default {
filters: {
formatNum_mod(val,nums_after_point) {
console.log(val,nums_after_point)// 传入值(4),则输出:19.9866666,4
return formatNum_mod(val,nums_after_point)
}
}
(utils下的) public.js 文件:
// utils下的 public.js 文件,如下:
// 千分位 : formatNum_mod(1234567893.99)。 nums_after_point:截取到小数点后nums_after_point位(不四舍五入,直接截断),默认后两位)
export function formatNum_mod(number, nums_after_point = 2) {
if (!number) return ''
let n = Number(number).toFixed(2).toString();
let r = '';
let temp = '';
let mod = '';
// v= Number(f).toFixed(2);
do {
// 求模的值, 用于获取高三位,这里可能有小数
mod = n % 1000;
// 值是不是大于1,是继续的条件
n = n / 1000;
// 高三位
temp = ~~mod;
// 1.填充: n > 1 循环未结束, 就要填充为比如 1 => 001
// 不然temp = ~~mod的时候, 1 001, 就会变成 "11"
// 2.拼接“,”
r = (n >= 1 ? `${temp}`.padStart(3, '0') : temp) + (!!r ? ',' + r : '');
} while (n >= 1);
const strNumber = number + '';
let index = strNumber.indexOf('.');
// 拼接小数部分
if (index >= 0) {
r += strNumber.substring(index, index + nums_after_point + 1); // 截取到小数点后两位, (因为小数点占一位,所以后面要+1)
}
return r;
}
tips:
- html中传入的4(虽然在参数的第一位),但在vue文件中的js部分,会赋值给filter中的 nums_after_point参数,而sumCount值会赋给filter中 的val参数。所以console.log打印出来的是