最近用VUE开发的财务系统,牵扯了很多金额,金额几千上万,数字不好区分,需求需要实现金额三位一隔,每三位用逗号或者其他符号隔开,那么安排一下。
-
// 金额三位间隔
-
export
const interval =
(key) => {
-
key +=
'';
-
let x = key.split(
'.');
-
let x1 = x[
0];
-
let x2 = x.length >
1 ?
'.' + x[
1] :
'';
-
let reg =
/(\d+)(\d{3})/;
-
while (reg.test(x1)) {
-
x1 = x1.replace(reg,
'$1' +
',' +
'$2');
-
// x2 = x2.replace(reg, '$1' + ',' + '$2');
-
}
-
return x1 + x2;
-
}
上方代码x1是小数点之前的,x2注释的是小数点之后的间隔,因为我们保留两位数,所以x2不需要,一般也都不需要后面的吧,所以我注释了,如果你需要,取消注释即可。
上方我用的 逗号 隔开的,大家可以使用 空格 - 等来间隔。
正则中,我写的3是三位间隔,你想银行卡四位间隔那就改为4,当然,你也可以把这个参数改为动态的,通过传值来实现。
VUE使用,先引入
import { interval } from '@A/resource/Utils';
使用
this.info.price = interval(this.info.price);
如果页面中是循环显示的金额数据,我们不能直接像上方那样单独来转换赋值,low方法就是for循环了或者其他遍历方法进行赋值,下面给大家在分享一个简单的方法吧(此方法也使用于上方单个赋值)!
组件中也需要引入interval
并在methods写入
-
methods: {
-
interval(val){
-
return interval(val)
-
}
-
}
在标签中就可以直接使用,如下
-
<div v-
for=
"(item, index) in list" :key=
"index">
-
<span>¥{{ interval(item.price) }}</span>
-
</div>
详情围观地址 http://sharedblog.cn/post/222.html
转载:https://blog.csdn.net/tianpeng1996/article/details/114830838
查看评论