vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼
看到這個(gè)標(biāo)題好像很簡(jiǎn)單，onblur、onchange事件都能做到，但是用戶體驗(yàn)感貌似很差。查了下百度查不到資料了。看了下vue的基礎(chǔ)，發(fā)現(xiàn) vue 有個(gè) watch 監(jiān)聽(tīng)器好吧，從這里入手 用v-model 加watch 就可以很簡(jiǎn)單的實(shí)現(xiàn)這一個(gè)功能。
----代碼省略
<input id="amt" type="number" v-model="amount"/>
----代碼省略
data:{
return{
amount:""
}
}
----代碼省略
watch:{
amount(newVal,oldVal){
console.log(newVal)
var reg = /^(\d{0,8})(\.(\d{0,2}))?$/g;
if(!reg.test(newVal)){
if(newVal == ''){
this.amount = '';
return;
}
this.amount = oldVal
}else{
this.amount = newVal;
}
}
}
ps：vue input控制輸入框十位整數(shù)位兩位小數(shù)位，其他字符不讓輸入
<input type="text" placeholder="請(qǐng)輸入金額" v-model="orderMoney" @input="checkInput" />
checkInput() {
this.orderMoney = this.dealInputVal(this.orderMoney);
},
dealInputVal(value) {
value = value.replace(/^0*(0\.|[1-9])/, "$1");
value = value.replace(/[^\d.]/g, ""); //清除"數(shù)字"和"."以外的字符
value = value.replace(/^\./g, ""); //驗(yàn)證第一個(gè)字符是數(shù)字而不是字符
value = value.replace(/\.{1,}/g, "."); //只保留第一個(gè).清除多余的
value = value
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
value = value.replace(/^(\-)*(\d*)\.(\d\d).*$/, "$1$2.$3"); //只能輸入兩個(gè)小數(shù)
value =
value.indexOf(".") > 0
? value.split(".")[0].substring(0, 10) + "." + value.split(".")[1]
: value.substring(0, 10);
return value;
}
總結(jié)
以上所述是小編給大家介紹的vue限制輸入框只能輸入8位整數(shù)和2位小數(shù)的代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明
這篇文章主要介紹了Vue中的請(qǐng)求攔截器和響應(yīng)攔截器用法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理
本篇文章主要介紹了淺談vue中數(shù)據(jù)雙向綁定的實(shí)現(xiàn)原理 ，主要使用v-model這個(gè)數(shù)據(jù)雙向綁定，有興趣的可以了解一下2017-09-09
Vue封裝localStorage設(shè)置過(guò)期時(shí)間的示例詳解
這篇文章主要介紹了Vue封裝localStorage設(shè)置過(guò)期時(shí)間的相關(guān)資料,在這個(gè)示例中,我們?cè)贛yComponent.vue組件的setup函數(shù)中導(dǎo)入了setItemWithExpiry和getItemWithExpiry函數(shù),并在函數(shù)內(nèi)部使用它們來(lái)設(shè)置和獲取帶有過(guò)期時(shí)間的localStorage數(shù)據(jù),需要的朋友可以參考下2024-06-06
elementui?el-select?change事件傳參問(wèn)題
這篇文章主要介紹了elementui?el-select?change事件傳參問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
基于vue 動(dòng)態(tài)菜單 刷新空白問(wèn)題的解決
這篇文章主要介紹了基于vue 動(dòng)態(tài)菜單 刷新空白問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析
這篇文章主要介紹了vue響應(yīng)式系統(tǒng)之observe、watcher、dep的源碼解析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
這篇文章主要介紹了Vue父子組件傳值的三種方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-12-12
vue.js todolist實(shí)現(xiàn)代碼
這篇文章主要介紹了vue.js todolist實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-10-10
vue3.0路由自動(dòng)導(dǎo)入的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3.0路由自動(dòng)導(dǎo)入的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue雙向錨點(diǎn)實(shí)現(xiàn)過(guò)程簡(jiǎn)易版(scrollIntoView)
這篇文章主要介紹了vue雙向錨點(diǎn)實(shí)現(xiàn)過(guò)程簡(jiǎn)易版(scrollIntoView),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07