Vue+Element文本框限制输入数字

Vue模板显示部分


Vue函数处理部分

// 文本框限制只能输入数值
    SetNumber(val, code) {
      let value = val.replace(/[^0-9.]/g, '').trim();
      const strlen = value.includes('.') ? value.split('.').length - 1 : 0;
      if (strlen >= 2) {
        const arr = value.split('.');
        value = `${arr[0]}.${arr[1]}`;
      }
      this.$set(this.modelForm, code, value);
    },

 函数功能解析:第一个参数是绑定的值,第二个参数是绑定值所属对象modelForm里的字段名,

首先将输入的文本内容进行正则内容筛选替换,不是数字及小数点内容全部替换为空,并且剔除左右空字符串,这里完成了基本操作,后面一段代码是处理用户输入这种数值:12.12.12.12,像这种输入多个小数点的数值,跟我们平常输入的数字肯定就是不一样的,所以后面这段代码就是为此做的判断,然后进行字符串拼接,最后进行数值重新绑定;

你可能感兴趣的:(#,Vue2,vue.js,前端,javascript,elementui)