vue制限入力ボックスは8桁の整数と2桁の小数のコードしか入力できません。

このタイトルを見ると簡単なようです。オンブラ、オンチャンゲイベントは全部できますが、ユーザーの体験感はとても悪いようです。百度を調べてみましたが、資料が見つかりませんでした。vueの基礎を見たら、vueにウォッチがあります。 モニターはここから始めてv-model加watchを使えば簡単にこの機能を実現できます。

----    
<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制御入力ボックス10桁の整数ビットの2桁の小さい数字、その他の文字は入力を許可しないでください。

<input type="text" placeholder="     " 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, ""); //  "  " "."     
  value = value.replace(/^\./g, ""); //               
  value = value.replace(/\.{1,}/g, "."); //      .     
  value = value
   .replace(".", "$#$")
   .replace(/\./g, "")
   .replace("$#$", ".");
  value = value.replace(/^(\-)*(\d*)\.(\d\d).*$/, "$1$2.$3"); //        
  value =
   value.indexOf(".") > 0
    ? value.split(".")[0].substring(0, 10) + "." + value.split(".")[1]
    : value.substring(0, 10);
  return value;
 }

締め括りをつける
以上は小编でご绍介したvue制限入力枠で、8桁の整数と2桁の小数点以下のコードしか入力できません。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。