快捷導(dǎo)航

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)器就可以了。話(huà)不多說(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à)就會(huì)清空掉數(shù)字。如果我們還想加入前面的數(shù)字不能大于后面的數(shù)字的話(huà)，我們只需要在需要的方法里面加一個(gè)判定條件就可以了。代碼如下：

     if (this.fromAge > this.toAge) {                    /* 如果起始年齡大于結(jié)束年齡的話(huà)，顯示提示框 */
            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)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題
這篇文章主要介紹了自定義elementui上傳文件以及攜帶參數(shù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-08-08
el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)
這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-02-02
一文帶你深入了解V-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定
這篇文章主要為大家詳細(xì)介紹了V-model實(shí)現(xiàn)數(shù)據(jù)雙向綁定的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-12-12
vue中v-model雙向綁定input輸入框問(wèn)題
這篇文章主要介紹了vue中v-model雙向綁定input輸入框問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案
這篇文章主要介紹了vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
一文帶你了解vue3.0響應(yīng)式
Vue3.0相比較于之前的版本更快、更小、更易于維護(hù)、更貼近原生、對(duì)開(kāi)發(fā)者更友好，本文就Vue3.0進(jìn)行詳細(xì)介紹，需要了解的小伙伴可以參考一下這篇文章
2021-09-09
解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目)
這篇文章主要介紹了解決微信瀏覽器緩存站點(diǎn)入口文件(IIS部署Vue項(xiàng)目),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
在Vue3中實(shí)現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法
在開(kāi)發(fā)中,通常遇到四種全局狀態(tài)數(shù)據(jù):異步數(shù)據(jù)、同步數(shù)據(jù),傳統(tǒng)的Vue3使用不同機(jī)制處理這些數(shù)據(jù),而Zova框架通過(guò)Model機(jī)制來(lái)統(tǒng)一管理,簡(jiǎn)化了數(shù)據(jù)處理流程,提高了代碼的可維護(hù)性,本文介紹在Vue3中實(shí)現(xiàn)四種全局狀態(tài)數(shù)據(jù)的統(tǒng)一管理的方法,感興趣的朋友一起看看吧
2024-10-10
解決vue單頁(yè)路由跳轉(zhuǎn)后scrollTop的問(wèn)題
今天小編就為大家分享一篇解決vue單頁(yè)路由跳轉(zhuǎn)后scrollTop的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09