elementUI之输入框限制数字功能实现

elementUI之输入框限制数字功能实现

第一种： 使用 oninput 加正则

 <div>输入框限制数字</div>
 <el-input
     v-model.trim="iptNum1"
     placeholder="请输入该内容分值"
     maxlength="3"
     minlength="1"
     oninput="value=value.replace(/[^\d]/g,'')"
  ></el-input>
 {{ iptNum1 }}

但是当中文输入输入之后，再输入数字，input的双向绑定失效，看着是输入了值实则获取不到值；

上面的问题改起来也可以，看网上也有解决方法可自行查看，但是感觉改动起来会麻烦，不如换着思路再去试试其他方法；

第二种： input事件加正则处理方法

<el-input
   v-model.trim="iptNum2"
   placeholder="请输入该内容分值"
   maxlength="3"
   minlength="1"
   @input="v => iptNum2 = v.replace(/[^\d]/g,'')"
></el-input>
{{ iptNum2 }}

这时候当中文输入输入之后，再输入数字，input的双向绑定没问题，也打印出来值；

当然输入框的其他功能可自行尝试；