[JavaScript知识库]el-input格式化数值，保留2位小数，实际为4位（不改变输入框中的实际值，仅改变显示的值）

本文针对el-input金钱方面的格式化保留两位小数，实际为4位或更多。

1.格式化el-input，显示为2位小数，实际为4位，和利润率为83%,实际为0.83

最近公司在写一个年入几十亿的大项目，其中的涉及到钱方面，税率和利润率等等的加减乘除。

要求：文本框中显示10.77，数据库中显示为10.7692，数据库中保留4位小数，前端显示为2位小数，税率和利润率要求带上%符号。

大部分的el-input使用的都是v-model双向绑定，那么文本框的值改了为2位小数，数据库保存时候的值也会被改变，这时候一定要想到v-model的弟弟，单向绑定，只从本页面的值获取，且不同时改变。

:value="dateForm.amout" 
#这个只是获取本页的变量，单向绑定，我们推荐使用Math.round，vue中.toFixed()有些bug。
:value="(Math.round(dateForm.amout * 100)/100).toFixed(2)"
#这里使用Math.round来四舍五入，使用.toFixed格式化代码（如果你input中不会为整数，那就不需要用.toFixed，这里为了排版好看一些，比如9，我要显示9.00，使用.toFixed就可。

税率和利润率

:value="Math.round(num * 100) + '%'"
# num为税费，即0.07

如果页面中格式化的el-input较多，可以抽出去

#这里我使用的本地方法，没有封装出去到main.js和其他的地方
#在methods内写
// 格式化数值，百分比
formatPercentage(num) {
  return Math.round(num * 100) + '%';
},
// 格式化数值，四舍五入，保留两位小数
formatRound(num) {
  return (Math.round(num * 100)/100).toFixed(2);
},
#在el-input中写
 <el-input
   :disabled="true"
   :value="formatRound(dataForm.amount)"
   placeholder="总收入"
   style="width: 82%"
 ></el-input>
 # 百分比的也一样

2.这里在介绍一下，输入金额的格式。

只能输入正数，即大于等于0，不可以输入减-，其他任何符合和字母。

<el-input
   type="number"
   v-if="scope.row.costAmount.edit"
   v-model="scope.row.costAmount.value"
   placeholder="请输入金额"
   onkeypress="return (/[\d\.]/.test(String.fromCharCode(event.keyCode || event.which))) || event.which === 8"
   @input="changeCostAmount(scope.row, scope.$index)"
 ></el-input>

在method中写方法

# 截取小数，输入两位小数以上后，不让再次输入
row.costAmount.value = row.costAmount.value.replace(
        /^(\d+)\.(\d\d).*$/,
        "$1.$2"
      );

以上是vue+element中对金额的格式化