[JavaScript知识库]vue表单 input框只允许输入价格的处理

<input @blur=“amountBlur” type=“text” v-model=“amount”/>

1、对 amount 增加 watch，限制输入。

 watch: {
    mount(val) {
    //先清除字符串中的所有非(数字和小数点)的字符。
     val=`${val}`.replace(/[^\d.]/g, '')
     
     //处理0开头的问题
     if(val.length>1){
      val = val.replace(/^0+/, '');
      val = val.length==0 ? "0" : val;
     }
     if( val.startsWith(".") ){
       val = "0"+val;
     }

     //处理只有两位小数的问题
     let dotIndex = val.indexOf(".") 
     if(dotIndex > 0 &&  dotIndex < val.length-3 ){
       val = val.substring( 0, dotIndex+3 );
     }
	 
	 #这样写，主要是兼容差的机器。
      setTimeout( ()=>{
        this.mount = val;
      })
    },
  },

2、增加 amountBlur 响应事件，用于去除最后一个小数点

methods: {
    amountBlur() {
      this.amount = this.amount.replace(/\.$/, "");
    }
}