vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
更新時間：2019年07月04日 09:57:23 作者：mubail
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
<el-input keyup.native="isFloor"/>
//正數(shù)，含小數(shù)
isFloor(e,type){
if(type=='floor') {
var val=e.target.value;
//限制只能輸入一個小數(shù)點
if (val.indexOf(".") != -1) {
var str = val.substr(val.indexOf(".") + 1);
if (str.indexOf(".") != -1) {
val = val.substr(0, val.indexOf(".") + str.indexOf(".") + 1);
}
}
e.target.value = val.replace(/[^\d^\.]+/g,'');
}
},
//正負(fù)數(shù)，含小數(shù)
isFloor(){
var obj=event.target;
var t = obj.value.charAt(0);
obj.value = obj.value.replace(".", "$#$")//把第一個字符'.'替換成'$#$'
.replace(/\./g, "")//把其余的字符'.'替換為空
.replace("$#$", ".")//把字符'$#$'替換回原來的'.'
.replace(/[^\d.]/g, "")//只能輸入數(shù)字和'.'
.replace(/^\./g, "")//不能以'.'開頭
.replace( /([0-9]+\.[0-9]{2})[0-9]*/,"$1")//只保留2位小數(shù)
if (t == '-') {
obj.value = '-' + obj.value;
}
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼
本篇文章主要介紹了vue2滾動條加載更多數(shù)據(jù)實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要給大家介紹了關(guān)于多個vue子路由文件自動化合并的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了element-ui表格列金額顯示兩位小數(shù)的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了element-ui多文件上傳的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
詳解vue2.0監(jiān)聽屬性的使用心得及搭配計算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽屬性的使用心得及搭配計算屬性的使用,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
Vue中使用vue2-perfect-scrollbar制作滾動條
這篇文章主要介紹了Vue中使用vue2-perfect-scrollbar滾動條,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
@vueuse/core提供了豐富的功能性鉤子,使得處理常見的開發(fā)任務(wù)變得更加簡潔和高效,本文將詳細(xì)介紹如何在Vue3項目中使用?@vueuse/core及其一些極具價值的功能,需要的可以參考下2024-11-11
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11