el-input输入金额，保留两位小数

最新推荐文章于 2024-04-12 15:46:42 发布

Stephy_Yy

最新推荐文章于 2024-04-12 15:46:42 发布

阅读量1.8w

点赞数 20

分类专栏： # 踩坑记录文章标签： javascript css vue.js

本文链接：https://blog.youkuaiyun.com/weixin_43503511/article/details/110925978

版权

踩坑记录专栏收录该内容

4 篇文章

订阅专栏

本文介绍两种方法来限制用户输入金额时只能保留两位小数。一种是通过正则表达式进行文本格式化，另一种是利用组件自动四舍五入到指定精度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：“只允许输入金额保留两位小数”，有2种实现方法

方法一（通过正则控制）：

html：

<el-input
  v-model="inputTable.amount"
  @input="formatNum(form.amount, 'amount')"
></el-input>

js：

formatNum(val, key) {
  let temp = val.toString();
  temp = temp.replace(/。/g, ".");
  temp = temp.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
  temp = temp.replace(/^\./g, ""); //验证第一个字符是数字
  temp = temp.replace(/\.{2,}/g, ""); //只保留第一个, 清除多余的
  temp = temp.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  temp = temp.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
  this.form[key] = temp;
},

方法二（使用组件）：

这个是我最近才发现的，方便多了TT
设置精度precision，即可四舍五入；
再改改样式，隐藏按钮，靠左对齐，最后效果和普通的input无异

 <el-input-number v-model="num" :precision="2"></el-input-number>

在这里插入图片描述