Vue input表单值number类型输入值保留两位小数，并防止输入多个小数点方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/meimeieee/article/details/89022499

背景：Vue开发移动端应用时，难免用到表单输入，比如金额。

需求：这时就需要吊起移动端数字键盘，input的type就必须设置成number，当然tel类型也可以，但是无法输入小数点。当然如果精力允许，你也可以自定义数字键盘是最好的，网上也有很多Vue数字键盘组件。

踩坑：一但用了input[type=number]类型有很多的坑。

1. vue在申明表单model的时候必须是整形，要不然一堆红报错。
2. maxlength属性不生效了，无法限制表单输入长度。
3. 可以多次输入小数点，其实这个model已经变成空值了，这个是最坑的。
4. 无法保留指定小数位数。
5. 无法限制最大值，最小值。

思路一：用原生oninput函数实现输入正则替换，自定义函数替换字符。（会破坏vue统一性，不推荐）

思路二：用vue的@nput函数实现输入正则替换，自定义函数替换字符。（实现麻烦，不推荐）

思路三：用vue的变量监听函数。（推荐）

<input class="amount-input" size="10" maxlength="6" type="number" placeholder="请输入金额" v-model.number="formData.amount">

watch:{
    'formData.amount':function (newVal,oldVal) {
      // 解决数字键盘可以输入输入多个小数点问题
      if(newVal=='' && oldVal.toString().indexOf('.')>0){
        this.formData.amount = oldVal;
        return ;
      }
      // 保留两位小数
      if(newVal){
        newVal = newVal.toString();
        var pointIndex =  newVal.indexOf('.');
        if(pointIndex>0 && (newVal.length - pointIndex)>3){
          this.formData.amount = oldVal;
          return ;
        }
      }
      // 最大值
      if(newVal>999999){
        this.formData.amount = oldVal;
        return ;
      }
    }
  }

上面的方法解决了，可以多次输入小数点问题，和保留小数位数，还有限制大小都可以在这里实现，因为监听函数可以获取到历史输入值，很方便还原，所以推荐这个方式。