vue實(shí)現(xiàn)input文本框只能輸入0-99的正整數(shù)問(wèn)題
更新時(shí)間：2022年10月21日 14:11:06 作者：前端李小白
這篇文章主要介紹了vue實(shí)現(xiàn)input文本框只能輸入0-99的正整數(shù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue input文本框只能輸入0-99的正整數(shù)
利用vue里面自帶的watch監(jiān)聽(tīng)器就可以了。話不多說(shuō)，直接貼代碼。
? ? ? ? ? ? <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ù)，如果不是的話就會(huì)清空掉數(shù)字。如果我們還想加入前面的數(shù)字不能大于后面的數(shù)字的話，我們只需要在需要的方法里面加一個(gè)判定條件就可以了。代碼如下：
if (this.fromAge > this.toAge) { /* 如果起始年齡大于結(jié)束年齡的話，顯示提示框 */
return this.$message.error('起始年齡不能大于結(jié)束年齡')
}
效果如下:
通過(guò)自定義指令實(shí)現(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 ?/>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
VUE項(xiàng)目中引入vue-router的詳細(xì)過(guò)程
vue-router 也叫 vue 路由，根據(jù)不同的路徑，來(lái)執(zhí)行不同的組件，這篇文章主要介紹了VUE項(xiàng)目中引入vue-router,需要的朋友可以參考下2023-05-05
如何在vue-cli中使用css-loader實(shí)現(xiàn)css module
這篇文章主要介紹了如何在vue-cli中使用css-loader實(shí)現(xiàn)css module，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
這篇文章主要介紹了Vue.js特性Scoped Slots的淺析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
在我們使用vue的開(kāi)發(fā)過(guò)程中總會(huì)遇到這樣的場(chǎng)景,封裝自己的業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于vue3封裝Notification組件的完整步驟,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
市面上大多數(shù)關(guān)于Vue.js自定義指令的文章都在講語(yǔ)法,很少講實(shí)際的應(yīng)用場(chǎng)景和用例,下面這篇文章主要給大家介紹了關(guān)于vue自定義封裝指令以及實(shí)際使用的相關(guān)資料,需要的朋友可以參考下2022-01-01
在 Vue 3 中,v-bind?指令用于將表達(dá)式的值綁定到 DOM 元素的屬性上,這個(gè)指令的語(yǔ)法與 Vue 2 相同,但有一些細(xì)微的變化和改進(jìn),這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下2024-08-08
在?Vue?3?中的?Composition?API?中,$refs?并不直接可用于?setup?函數(shù),但是實(shí)際工作中確實(shí)有需求,那么該如何解決呢,本文為大家整理了兩個(gè)方案,希望對(duì)大家有所幫助2023-08-08
在VUE開(kāi)發(fā)項(xiàng)目的過(guò)程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關(guān)于Vue3插槽(slot)使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
handsontable是目前在前端界最接近excel的插件，可以執(zhí)行編輯，復(fù)制粘貼，插入刪除行列，排序等復(fù)雜操作，這篇文章主要介紹了hansontable在vue中的基本使用,需要的朋友可以參考下2022-10-10