vue如何限制只能輸入正負數(shù)及小數(shù)
更新時間：2019年07月04日 09:57:23 作者：mubail
這篇文章主要介紹了vue如何限制只能輸入正負數(shù)及小數(shù),文中通過示例代碼介紹的非常詳細，對大家的學(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,'');
}
},
//正負數(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)文章
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了Vue自定義屬性,結(jié)合實例形式分析了vue.js自定義屬性相關(guān)原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2019-02-02
Fragment 是 Vue 3 中的新特性,允許一個組件模板返回多個根節(jié)點,與傳統(tǒng)方式不同,不再需要一個額外的 DOM 元素來包裹所有內(nèi)容,本文將詳細介紹 Fragment 的概念、使用場景、優(yōu)點以及可能遇到的問題,需要的朋友可以參考下2024-08-08
vue element el-form 多級嵌套驗證的實現(xiàn)示例
本文主要介紹了vue element el-form 多級嵌套驗證的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼
這篇文章主要介紹了vue項目base64字符串轉(zhuǎn)圖片的實現(xiàn)代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07
.native主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個vue組件轉(zhuǎn)化為一個普通的HTML標簽，并且該修飾符對普通HTML標簽是沒有任何作用的，這篇文章主要介紹了vue?事件中的?.native你搞清楚了嗎,需要的朋友可以參考下2023-02-02
vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過 Options API 和 Composition API 對比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對大家有所幫助2021-11-11
vue3的setup語法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語法如何自定義v-model為公用hooks，文章分為兩個部分介紹，簡單介紹vue3的setup語法如何自定義v-model和如何提取v-model語法作為一個公用hooks2022-07-07
Vue.js教程之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)膶W(xué)習(xí)實踐
這篇文章主要給大家介紹了Vue.js之a(chǎn)xios與網(wǎng)絡(luò)傳輸?shù)南嚓P(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟隨小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-04-04