vue自定义指令:金额保留两位小数并且每三位逗号分割

vue中过滤数据小数点前使用千位分隔符 小数点后不使用且保留位数 import Vue from 'vue' //全局过滤器,金额千分位 Vue.filter('moneyFormat', function (value) { if (value != undefined) { return value.toFixed(2).toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,"); } }) //全局过滤器,数量2位 Vue.filter('qtyFormat', function (value) { 阅读详情

vue自定义指令:金额保留两位小数并且每三位逗号分割
可以专门建一个filter.js文件,统一做vue的一些自定义指令,方便以后维护。
建的filter.js在main.js中引用(全局的自定义指令)。当然你直接在main.js里写也没有问题,只是后期不好维护。这里使用filter.js文件
首先在filter.js中引入Vue

import Vue from 'vue'
//保留两位小数并用逗号分隔
Vue.filter('sumFilter', function(num) {
	if(num) {
		if(!isNaN(num) && typeof num === 'number') {
			return num.toFixed(2).toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'/);
		} else {
			return parseFloat(num).toFixed(2).toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'/);
		}
    }else if (num === null || num === undefined || num === '') {
    	return ''
    }else if (num === 0) {
		return num + '.00'
   }
})

//不要两位小数 用逗号分隔(把.toFixed(2)去掉)
Vue.filter('sumFilterInteger', function(num) {
	if(num) {
		if(!isNaN(num) && typeof num === 'number') {
			return num.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'/);
		} else {
			return parseFloat(num).toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,'/);
		}
    }else if (num === null || num === undefined || num === '') {
    	return ''
    }else if (num === 0) {
		return num
   }
})


写完自定义指令之后在你的vue文件中用到这个指令的地方
直接使用 | sumFilter 就可以了
‘金额’ | sumFilter

vue element-ui实现input输入框金额数字添加千分位 主要介绍了vue element-ui实现input输入框金额数字添加千分位,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 立即下载

相关推荐

快速傅里叶变换(FFT)原理详解:从理论到实践

本文系统介绍了快速傅里叶变换(FFT)的理论与实践。首先阐述了傅里叶变换的数学定义和离散傅里叶变换(DFT)的矩阵表示,指出其O(N²)计算复杂度限制了实际应用。然后详细解析了Cooley-Tukey算法的核心思想,包括分治策略、蝶形运算原理和旋转因子的周期性特性,将复杂度降至O(Nlog₂N)。文章比较了按时间抽取(DIT)和按频率抽取(DIF)两种FFT算法实现,并讨论了FFT在信号处理等领域的应用及其局限性。通过理论分析和实例说明,展现了FFT如何成为现代数字信号处理的基石算法。

qq_42212808的博客 2938

vue金额类格式化之逗号分隔三位且保留两位小数

金额格式化处理几种方案

weixin_43983960的博客 7096

计算机视觉三大顶会(ICCV/CVPR/ECCV)投稿指南与趋势解析

本文详细解析计算机视觉三大顶会(ICCV/CVPR/ECCV)的投稿指南与最新趋势。从基础认知到实战经验,涵盖时间线管理、选题策略、论文写作技巧及实验设计要点,帮助研究者提升投稿成功率。特别关注2024年技术融合、评估维度和伦理要求等前沿趋势,为计算机视觉领域的研究者提供实用建议。

weixin_29165725的博客 1850

金额格式化,三位数逗号分隔,小数点后保留两位(vue金额过滤器)

vue金额过滤器

qq_45331969的博客 4951

【虚拟化生态平台】虚拟化平台esxi挂载USB硬盘

虚拟化平台安装好之后,一般情况下,只有一个硬盘在工作,其他的外接硬盘(我的只有一个ssd硬盘,其他的均是usb外接,SATA接口的硬盘是否这样我暂时不清楚哈)没有在工作,但是一个硬盘明显不够我们使用的,所以我们需要去挂载外接的硬盘来扩容。...

Rubik Blog 4835

Jupyter Lab 无法启动 Kernel 问题排查与解决总结

使用 curl,telnet,或 Python websocket-client 库可以本地模拟 WebSocket 握手行为,帮助分析服务端响应状态。避免使用 http:// + ws:// 组合方式部署 Jupyter Lab,特别是在远程或跨域访问场景。建议统一采用 https:// + wss:// 方式部署,确保浏览器信任并兼容。确认 WebSocket 已升级为 wss://,内核可正常启动。但在远程访问时,浏览器出于安全策略,默认拒绝 ws:// 协议。

weixin_43866043的博客 1861

金额保留三位小数,并且每隔三位一个逗号显示以及金额大写转化

1、在filters文件夹下面新建inde.js 2、在main.js中引入 3、页面里面使用

qq_29124867的博客 1211

Vivado FIR Complier_IP核使用方法

文章依靠该IP核对应手册PG149写的,因为笔者需求简单,没有深入挖掘功能,可以自行下载学习。

2302_80180551的博客 3994

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

最近用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})/; ...

鹏仔工作室的秘密基地 2385

如何利用gretna软件计算脑网络全局属性(聚类系数,小世界属性,最短路径),局部属性指标(度,度分布,节点效率),如何理解网络稀疏度

grena工具箱被设计用于fMRI数据的图论网络分析。它是一套MATLAB函数和基于MATLAB的接口,用于常规的fMRI预处理,用于计算和统计分析最常用的网络指标,如小世界参数、效率、度、间性、关联性、层级性、同步性和模块化。......

从事脑科学核磁共振方法学研究,在Nature communications等权威期刊发表研究论文,熟练掌握磁共振处理方法和统计学方法,欢迎大家和我交流。 9175

手把手教你学Simulink——基于Simulink的Boost变换器电流模式控制(峰值电流控制)建模示例

本文详细介绍了基于Simulink的Boost变换器峰值电流模式控制建模方法。首先分析了Boost变换器在CCM模式下的工作原理及电流控制优势,重点阐述了斜坡补偿的必要性。通过分步指导搭建Simulink模型,包括主电路、电流采样、RS触发器和电压外环PI控制器等核心模块。仿真验证了系统在启动、负载突变和输入电压跌落等工况下的优异性能,输出电压稳定在48V±0.5V。文章还总结了工程实践要点,并提出了数字实现等扩展方向。该建模方法为电力电子高级控制策略的工程验证提供了有效途径。

MHD0815的博客 249

vue——数字加逗号分隔

带小数的数字三位一分隔 filters: { num: (val, fix = 2) => { val = val.toFixed(fix) // 保留小数2位 val = '' + val // 转换成字符串 let int = val.slice(0, fix * -1 - 1) // 获取整数 let ext = val.slice(fix * -1 - 1) // 获取到小数 int = int.split('').reverse().j

Juliet_xmj的博客 4224

基于Qt C++开发一个体测数据管理系统

advice.dietAdvice = "饮食建议:\n1. 控制总热量摄入,每天减少300-500大卡\n2. 减少精制碳水(白米饭、白面包、甜食)\n3. 增加优质蛋白和膳食纤维摄入\n4. 烹饪方式以蒸、煮、烤、凉拌为主,减少油炸\n5. 晚餐适量减少,睡前3小时避免进食";dataTable->setHorizontalHeaderLabels({"ID", "用户名", "身高(cm)", "体重(kg)", "BMI", "体脂率(%)", "记录时间"});

寒寒豆豆软件公司的博客 192

格式化金额:逗号分隔三位且保留两位小数

/** * 格式化金额:逗号分隔三位且保留两位小数 */ Vue.filter('amountFormat',(amount) => { if(!amount) { return "-" } //强制保留两位小数 let f = parseFloat(amount); if (isNaN(f)) return false; f = Math.round(amount * 100) / 100; let s = f.toString(); let rs = s.i

李泽言的博客 448

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

JS,对数字实现三位分割显示

对较长的数字进行分割,按金额显示样式3位逗号分割,通过百度查找来实现需求,记录下来希望能帮助其他有需要的人,也是方便自己下次使用。 代码如下: /** * 对数字进行三位分割 * @param {*} value 需要进行分割的数字 * @returns 返回分割后的数字串 */ // 小数部分只显示两位小数 export function NumFormat(value) { if (!value) return '0' var intPart = Number(value)

qq_42704540的博客 3532

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

金额位数控制,只能显示小数点后两位

第一种方式: 使用element组件当中el-input-number标签, <el-input v-model="money" placeholder="请输入金额" @input="handleMoney" :max="11" type="number"/> :precision='2':控制显示小数点后两位 :min="1":设置最小的数值 :max="9999":设置最大的数值。 第二种方式:使用普通的输入框 <el-input v-model="money"

qq_57260058的博客 731

uniapp金钱符号自动分割

无

fanxingxue的博客 577

金额千位数格式化方法

公司做项目需要用到奖金额格式化,每千位用逗号隔开 随写一下方法 实现思路: 首先对传入的数值进行字符串分割,然后分别对整数部分和小数部分进行整理, 为实现的功能,小数位置目前只限制两位,因为公司没有需求,目前没有写 /** * @description 传入一个金额 格式化千位用逗号隔开 * @param {number} money 金额,可以是正整数或...

我是渣渣 3241

Vue过滤格式化金额

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_33770878的博客 952

电商,金额数字从最后一位开始,每三位用逗号隔开

例如: 调用方法,传入n值即可 dealSealNumber(n) { const b = parseInt(n).toString() const len = b.length if (len <= 3) return b const r = len % 3 return r > 0 ? b.slice(0, r) + ',' + b.slice(r, le

QZ9420的博客 184

Vue货币输入实战:v-money精准控制金额格式与数据一致性

货币输入是金融、电商、财务类Web应用的基础交互环节,其本质是数字在用户输入、界面展示与后端传输三者间的无损映射。核心原理在于分离显示格式(如¥1,234.56)与原始数值(1234.56),避免字符串解析歧义和浮点精度污染。技术价值体现在实时拦截非法字符、动态千分位适配、双向绑定纯净数字等生产级保障。典型应用场景包括后台价格配置、多币种结算表单、高精度报销录入等。本文聚焦Vue生态下v-money指令的深度实践,覆盖参数契约设计、国际化格式处理、SSR协同及无障碍增强,解决‘输入即失真’这一高频工程痛点。

weixin_33692284的博客 418

vue中的数字动画及数字逗号显示

需求:实现数字动画,并实现数字千位分隔符格式(8888,显示为8,888),数字从0-8888实现动画递增 utils/common.js /** * 数字过渡动画-目前版本-默认一秒之内完成过渡动画 * @param current number 当前值 * @param target number 目标值 * @param _this 传递 当前实例指向 this * @param property string _this 和 property 是因为要把需要改变的属性传递进去,因为函数.

weixin_43794749的博客 1302

千位分隔符

/*小程序*/ /*新建flitersUtils.wxs*/ var threeNum = function (num) { //参数是数字 var thisNum = (num || 0).toString().split('.');//判断如果有小数点就分割这个数为一个数组 var num = thisNum[0]; //截取小数点前面的部分保存 var fuNum = this...

J_S_King的博客 797

JavaScript实现数字千分位的方法

如何利用 JavaScript 将普通数字转换为带有千分位分隔符的格式。我们将介绍多种方法,包括使用内置的 toLocaleString()方法、Intl.NumberFormat对象以及自定义函数来实现数字格式化。无论你是初学者还是有一定经验的开发者,本文都将为你揭示数字格式化的各种技巧和灵活性,让你在数据展示方面游刃有余。让我们一起探索如何美化数字,让数据更加清晰和吸引人!千分位分割指的是在数字中插入逗号或其他分隔符,以提高数字的可读性。

高宇辰 1403

Vue混入功能

引子 在Vue项目中,对于公共方法、枚举变量(如0表示未审批,1表示审批通过,2表示审批驳回)等,可以单独写在一个模块(即一个.js文件)里,在需要的组件中import即可。 在一个模块中统一定义,谁用谁导入 //data.js let StaticData = { getLiAnResult() { return [ {id: 1, value: "受理", active...

火柴头的专栏 827

中后台项目中的数字格式化工具:Naive Ui Admin CountTo组件详解

在现代中后台管理系统中,数字的展示和格式化是数据可视化的核心需求之一。无论是展示销售额、访问量、订单数量还是其他业务指标,清晰、美观的数字展示都能显著提升用户体验。Naive Ui Admin作为基于Vue3、Vite2和TypeScript的企业级中后台解决方案,提供了一个强大的数字动画组件——CountTo,它不仅支持数字的平滑动画过渡,还内置了灵活的数字格式化功能,是中后台项目中处理数字展示

gitblog_01018的博客 329
上一篇: vue 子组件会接收不同的数据类型,数据设置默认值的写法
下一篇: Vue混入mixins的简单用法
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值