脚本宝典收集整理的这篇文章主要介绍了Vue中结合ElementUI实现：限制输入框只能输入正整数，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

Vue中结合ElementUI实现：限制输入框只能输入正整数

input中禁止输入小数和负数（只允许输入正整数）

做法一：利用禁止按键的方法，主要是依靠禁止按下减号以及小数点来完成的

1. 首先要监听keyup（键盘按下）事件，因为elementUi上面的input组件监听事件是没有这个事件的，所以可能会报错，所以我们需要加个vue事件的修饰符 .native，代表原生事件的意思。
2. 然后我们传个$event对象进去来获取原生的DOM（可以简单理解为触发事件的本身）
3. 接下来就是在methods中写这个函数了

具体的意思我已经写在上面了，按下键后，可以自己弹出一下keynum和keychar所代表的的字符或者键盘码，根据哪个判断都可以，我选择使用键盘码来判断
进入判断后我们就可以做交互了，我选择清掉用户所输入的数据。

做法二：利用正则来规避掉小数点和负数

1. 在这里呢使用的就是elementUI的事件了，我们监听一下失去焦点的时候要触发事件，同样的我们要传入进去$event参数
2. methods中编写函数

这里使用的正则的意思代表的是（会正则的大佬就可以省略啦或者帮小弟看看不足之处）：
首先我们先看开头的^和结尾的$这里分别代表匹配字符串的开头以及匹配字符串的结尾，而[1-9]是代表的是匹配1-9其中的数字，所以会过滤掉负数和小数，同时要求开头必须要以1开头，后面的则是匹配以0-9结尾的数字，而*代表的是0次或多次，也就是不限制结尾的数字，合起来的意思就是：我们匹配从1-9中的某个数开头，并且以0-9中的某个数结尾的匹配。最后呢就是做的判断了，如果符合我们所定义的正则就不用提示错误了，如果不符合呢，就会提示错误，同时清空数据

脚本宝典总结

以上是脚本宝典为你收集整理的Vue中结合ElementUI实现：限制输入框只能输入正整数全部内容，希望文章能够帮你解决Vue中结合ElementUI实现：限制输入框只能输入正整数所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。