vue 控制用户只能输入正整数的方法

在工作中遇到一个问题，台端接口只能接收正整数的数据，中文，小数点，特殊字符等其他数据形式都会报错

经过一番查找，找到一个能使用的方法

在行内添加正则控制，如下所示：

 <el-input 
  v-model="dataList"
  style="width: 80%"
  placeholder="请输入数据"
  oninput="value=value.replace(/[^\d]/g,'')"
 ></el-input>

这个方法确实能达到想要的效果，所有非正整数的内容都无法输入。但是在测试中发现，这个办法会时不时的与v-model绑定断开，造成功能无法使用。

所以我在这个方法的思路上进行了改造，改成了下面这样：

watch: {
    dataList (val) {
      this.dbPort = val.replace(/\D/g, '')
    }
  },

使用watch进行数据监听，同样能达到我想要的效果，而且经过测试也没有出现与model无法绑定的现象。

注：此方法只适用于单一数据进行控制或者多个数据不同控制条件时使用，多个数据相同控制条件不建议这样写，浪费时间。

前端小白一只，致力于分享工作中遇到的问题，如果有写的不对的地方请大神指正，如果对你有帮助请点个赞，万分感谢！

标签： vue.js javascript elementui

本文转载自: https://blog.csdn.net/ZhaoGongZi_Y/article/details/127617991
版权归原作者 ZhaoGongZi-Ya 所有，如有侵权，请联系我们删除。