vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題
更新時間：2022年10月21日 14:11:06 作者：前端李小白
這篇文章主要介紹了vue實現(xiàn)input文本框只能輸入0-99的正整數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue input文本框只能輸入0-99的正整數(shù)
利用vue里面自帶的watch監(jiān)聽器就可以了。話不多說，直接貼代碼。
? ? ? ? ? ? <div class="age-select"> ? ? ? ? ? ? <input type="text" class="fromAge-input" v-model="fromAge" />至 ? ? ? ? ? ? <input type="text" class="toAge-input" v-model="toAge" /> ? ? ? ? ? ? </div>
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的正整數(shù)，如果不是的話就會清空掉數(shù)字。如果我們還想加入前面的數(shù)字不能大于后面的數(shù)字的話，我們只需要在需要的方法里面加一個判定條件就可以了。代碼如下：
if (this.fromAge > this.toAge) { /* 如果起始年齡大于結(jié)束年齡的話，顯示提示框 */
return this.$message.error('起始年齡不能大于結(jié)束年齡')
}
效果如下:
通過自定義指令實現(xiàn)文本框只能輸入正整數(shù)
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;
}
}
});
},
},
使用
?<input type="text" v-numInput ?/>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目實現(xiàn)下載zip壓縮包方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
el-table實現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-02-02
一文帶你深入了解V-model實現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細介紹了V-model實現(xiàn)數(shù)據(jù)雙向綁定的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-12-12
這篇文章主要介紹了vue中v-model雙向綁定input輸入框問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue3.0相比較于之前的版本更快、更小、更易于維護、更貼近原生、對開發(fā)者更友好，本文就Vue3.0進行詳細介紹，需要了解的小伙伴可以參考一下這篇文章2021-09-09
這篇文章主要介紹了解決微信瀏覽器緩存站點入口文件(IIS部署Vue項目),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
在Vue3中實現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法
在開發(fā)中,通常遇到四種全局狀態(tài)數(shù)據(jù):異步數(shù)據(jù)、同步數(shù)據(jù),傳統(tǒng)的Vue3使用不同機制處理這些數(shù)據(jù),而Zova框架通過Model機制來統(tǒng)一管理,簡化了數(shù)據(jù)處理流程,提高了代碼的可維護性,本文介紹在Vue3中實現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法,感興趣的朋友一起看看吧2024-10-10
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09