百变鹏仔-专注前端行业精选
js将数字金额用符号间隔 vue中使用逗号间隔数字金额
作者:鹏仔先生日期:2021-03-05 17:17:39浏览:3285分类:JavaScript
最近用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>
手机扫码访问
猜你还喜欢
- 11-01 vue中实现代码高亮
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。