小言_互联网的博客

js将数字金额用符号间隔 vue中使用逗号间隔数字金额-共享博客

423人阅读  评论(0)

最近用VUE开发的财务系统,牵扯了很多金额,金额几千上万,数字不好区分,需求需要实现金额三位一隔,每三位用逗号或者其他符号隔开,那么安排一下。


  
  1. // 金额三位间隔
  2. export const interval = (key) => {
  3. key += '';
  4. let x = key.split( '.');
  5. let x1 = x[ 0];
  6. let x2 = x.length > 1 ? '.' + x[ 1] : '';
  7. let reg = /(\d+)(\d{3})/;
  8. while (reg.test(x1)) {
  9. x1 = x1.replace(reg, '$1' + ',' + '$2');
  10. // x2 = x2.replace(reg, '$1' + ',' + '$2');
  11. }
  12. return x1 + x2;
  13. }

上方代码x1是小数点之前的,x2注释的是小数点之后的间隔,因为我们保留两位数,所以x2不需要,一般也都不需要后面的吧,所以我注释了,如果你需要,取消注释即可。

上方我用的 逗号 隔开的,大家可以使用 空格 - 等来间隔。

正则中,我写的3是三位间隔,你想银行卡四位间隔那就改为4,当然,你也可以把这个参数改为动态的,通过传值来实现。

 

VUE使用,先引入

import { interval } from '@A/resource/Utils';

使用

this.info.price = interval(this.info.price);

 

如果页面中是循环显示的金额数据,我们不能直接像上方那样单独来转换赋值,low方法就是for循环了或者其他遍历方法进行赋值,下面给大家在分享一个简单的方法吧(此方法也使用于上方单个赋值)!

组件中也需要引入interval

并在methods写入


  
  1. methods: {
  2. interval(val){
  3. return interval(val)
  4. }
  5. }

在标签中就可以直接使用,如下


  
  1. <div v- for= "(item, index) in list" :key= "index">
  2. <span>¥{{ interval(item.price) }}</span>
  3. </div>

详情围观地址 http://sharedblog.cn/post/222.html

个人博客http://sharedblog.cn/

软件下载http://iqzhan.com/


转载:https://blog.csdn.net/tianpeng1996/article/details/114830838
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场