您现在的位置是:网站首页> 编程资料编程资料
vue实现input文本框只能输入0-99的正整数问题_vue.js_
2023-05-24
570人已围观
简介 vue实现input文本框只能输入0-99的正整数问题_vue.js_
vue input文本框只能输入0-99的正整数
利用vue里面自带的watch监听器就可以了。话不多说,直接贴代码。
至
data里面
data () { return{ fromAge: '0', toAge: '99' } }在watch里面:
watch: { fromAge (newName, oldName) { var reg = /^([1-9]\d|\d)$/ if (!reg.test(newName)) { this.fromAge = '' } else { this.fromAge = newName } }, toAge (newName, oldName) { var reg = /^([1-9]\d|\d)$/ if (!reg.test(newName)) { this.toAge = '' } else { this.toAge = newName } } },效果如下:

这里输入框只能输入0-99的正整数,如果不是的话就会清空掉数字。如果我们还想加入前面的数字不能大于后面的数字的话,我们只需要在需要的方法里面加一个判定条件就可以了。代码如下:
if (this.fromAge > this.toAge) { /* 如果起始年龄大于结束年龄的话,显示提示框 */ return this.$message.error('起始年龄不能大于结束年龄') } 效果如下:


通过自定义指令实现文本框只能输入正整数
directives: { numInput(el) { el.addEventListener("keypress", function (e) { e = e || window.event; let charcode = typeof e.charCode === "number" ? e.charCode : e.keyCode; let re = /\d/; if ( !re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey ) { if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } } }); }, }, 使用
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- 微信小程序实现人脸识别对比_javascript技巧_
- Ant Design of Vue的树形控件Tree的使用及说明_vue.js_
- Ant Design Vue 修改表格头部样式的详细代码_vue.js_
- 关于echarts 清空上一次加载的数据问题_vue.js_
- echarts3如何清空上一次加载的series数据_vue.js_
- 使用Element时默认勾选表格toggleRowSelection方式_vue.js_
- Vue3组件挂载之创建组件实例详解_vue.js_
- Nodejs读取本地json文件,输出json数据接口方式_node.js_
- Vue数据变化后页面更新详细介绍_vue.js_
- vue实现input文本框只能输入0-99的正整数问题_vue.js_
