首先講一下功能需求霹崎，input框輸入限制最多輸入到小數(shù)點后兩位铐姚，小數(shù)點前必須是符合數(shù)字規(guī)范不能出現(xiàn)非法字符之類的情況
剛開始寫的時候單純想用正則去實現(xiàn)后來發(fā)現(xiàn)好像會有很多問題徙垫，和我的好基友探討之后發(fā)現(xiàn)最后只能通過自己寫個方法監(jiān)聽用戶輸入去實現(xiàn)赢底，話不多說直接上代碼！
input輸入框
通過@input用來監(jiān)聽用戶輸入值，只要輸入值變化就會觸發(fā)filterNumberAndDot()方法
通過data里return的group.electricPrice綁定輸入框的值
data(){
return {
group:{
electricPrice:''
}
}
}
接下來最重要的filterNumberAndDot()方法
具體需要解釋的地方在代碼中已經(jīng)標出
filterNumberAndDot() {
let value = this.group.electricPrice;
value = value
.replace(/[^\d.]/g, "") //將非數(shù)字和點以外的字符替換成空
.replace(/^\./g, "") //驗證第一個字符是數(shù)字而不是點
.replace(/\.{2,}/g, ".") //出現(xiàn)多個點時只保留第一個
.replace(".", "$#$") // 1、將數(shù)字的點替換成復雜字符$#$
.replace(/\./g, "") // 2、將字符串的點直接清掉
.replace("$#$", ".") // 3最冰、將復雜字符再轉(zhuǎn)換回點
.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能輸入兩個小數(shù)
if (value.indexOf(".") < 0 && value != "") {
value = parseFloat(value);
} else if (value.indexOf(".") > 1 && value[0] === '0') {
value = parseFloat(value);
}
// this.$set向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的稀火，且觸發(fā)視圖更新
//調(diào)用方法：this.$set( target, key, value )
// target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
// key：要更改的具體數(shù)據(jù)
// value ：重新賦的值
this.$set(this.group,'electricPrice',value.toString())
}
最后大功告成暖哨，我們需要實現(xiàn)的功能就完成了
