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

ZhaoGongZi-Ya

已于 2023-02-06 10:06:48 修改

阅读量7.3k

点赞数

文章标签： vue.js javascript elementui 前端

于 2022-10-31 16:33:28 首次发布

本文链接：https://blog.csdn.net/ZhaoGongZi_Y/article/details/127617991

版权

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

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

 <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无法绑定的现象。

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

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

关注