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-router 也叫 vue 路由，根據(jù)不同的路徑，來執(zhí)行不同的組件，這篇文章主要介紹了VUE項目中引入vue-router,需要的朋友可以參考下2023-05-05
如何在vue-cli中使用css-loader實現(xiàn)css module
這篇文章主要介紹了如何在vue-cli中使用css-loader實現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了Vue.js特性Scoped Slots的淺析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
在我們使用vue的開發(fā)過程中總會遇到這樣的場景,封裝自己的業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于vue3封裝Notification組件的完整步驟,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語法,很少講實際的應(yīng)用場景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
在 Vue 3 中,v-bind?指令用于將表達式的值綁定到 DOM 元素的屬性上,這個指令的語法與 Vue 2 相同,但有一些細微的變化和改進,這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下2024-08-08
在?Vue?3?中的?Composition?API?中,$refs?并不直接可用于?setup?函數(shù),但是實際工作中確實有需求,那么該如何解決呢,本文為大家整理了兩個方案,希望對大家有所幫助2023-08-08
在VUE開發(fā)項目的過程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關(guān)于Vue3插槽(slot)使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下2022-10-10