当前位置: 首页 > news >正文

js 数字逢三切断、整数最大9位、小数最大2位

为了在 el-input 中实现这种功能,我们可以在 v-model 的输入值发生变化时进行格式化。

<template><el-inputv-model="addForm.accrateval"@input="formatInput"placeholder="请输入数字"/>
</template><script>
export default {data() {return {addForm: {accrateval: '', // 用于绑定输入值},};},methods: {formatInput(value) {// 1. 去除非数字和小数点字符,且保证小数点最多一个let val = value.replace(/[^\d.]/g, '');// 2. 分割整数部分和小数部分const parts = val.split('.');let integerPart = parts[0].slice(0, 9); // 整数部分最多9位let decimalPart = parts[1] || '';// 3. 如果小数部分存在,保留最多2位decimalPart = decimalPart.slice(0, 2);// 4. 如果有小数部分,补足两位;如果没有小数部分,补“.00”if (decimalPart) {val = integerPart + '.' + decimalPart.padEnd(2, '0');} else {val = integerPart + '.00';}// 5. 逢三切断val = val.replace(/(\d)(?=(\d{3})+(\.))/g, '\$1,');// 更新输入框的值this.addForm.accrateval = val;},},
};
</script>

注释:

  • 输入 1234567 时,最终显示 1,234,567.00
  • 输入 1234567.89 时,显示 1,234,567.89
  • 输入 1234567890 时,显示 123,456,789.00(整数超过9位会被限制为9位)。

//方案2

不逢三切断 , 整数6位, 小数2位

<el-inputstyle="width:150px;"v-model="addForm.accrateval"maxlength="9" oninput="value=value.replace(/^(\d{0,6}(?:\.\d{0,2})?).*$/g, '$1')"@blur="$event.target.value?addForm.accrateval = Number($event.target.value)?Number($event.target.value).toFixed(2):'':''"/>

输入 1234567 时,最终显示 123456时,显示123456.00

输入 123456.11 时,最终显示 123456.11 

http://www.dtcms.com/a/292054.html

相关文章:

  • LeetCode 热题100:42.接雨水
  • 数据交换---JSON格式
  • uniapp在app中关于解决输入框键盘弹出后遮住输入框问题
  • haproxy七层均衡
  • ucharts 搭配uniapp 自定义x轴文字 实现截取显示
  • 基于SpringBoot+Uniapp的非遗文化宣传小程序(AI问答、协同过滤算法、Echarts图形化分析)
  • 代码随想录算法训练营Day35|动态规划Part03|01背包问题 二维、01背包问题 一维、416. 分割等和子集
  • (12)机器学习小白入门YOLOv:YOLOv8-cls 模型微调实操
  • YOLO-实例分割头
  • 解决http下浏览器无法开启麦克风问题
  • 【论文阅读 | TIV 2024 | CDC-YOLOFusion:利用跨尺度动态卷积融合实现可见光-红外目标检测】
  • Python实例之画小猪佩奇
  • 知识库搭建之Meilisearch‘s 搜索引擎 测评-东方仙盟测评师
  • Agent架构与工作原理:理解智能体的核心机制
  • Apache Ignite 中 WHERE 子句中的子查询(Subqueries in WHERE Clause)的执行方式
  • 社交电商推客系统全栈开发指南:SpringCloud+分润算法+Flutter跨端
  • 深入浅出控制反转与依赖注入:从理论到实践
  • 深度学习的一些疑点整理
  • J2EE模式---拦截过滤器模式
  • 操作系统 —— A / 概述
  • 工业通信网关详解:2025年技术选型与物联网方案设计指南
  • 激活函数Focal Loss 详解​
  • Jenkins流水线中的核心概念
  • DearMom以“新生儿安全系统”重塑婴儿车价值,揽获CBME双项大奖
  • STM32 GPIO(通用输入输出)详解:从模式原理到实战应用
  • C++_Hello算法_队列
  • Word2Vec和Doc2Vec学习笔记
  • 用手机当外挂-图文并茂做报告纪要
  • AWS PrivateLink方式访问Redis
  • Windows游戏自动检测本地是否安装 (C++版)