vuejs限制input框只能输入0-100的数字

Question

 loadNumber: function (event) {
        var el = event.currentTarget;
        var elValue = el.value;
        var reg = /^((?!0)\d{1,2}|100)$/;
        if (!elValue.match(reg)) {
            elValue = "";
            console.log("b")
            return false;
        } else {
            return true;
        }

    }

我做的是用正则判断后重新赋值，问题出在不能重新赋值

  <input v-model="UploadInfoModel.ER" @keyup="loadNumber($event)" />

Answer 1

我这有个方法,可以限制,这个是JQuery版本的,你看合用不.
这个方法 解决了:输入法输入 粘贴 直接输入 不符合要求字符的问题,并且提供自定义最大值和最小值的功能.

<input type="text" data-target="1" data-min="0" data-max="5" style="width:54px" class="number-box">

            $(".number-box").on("input",function(event){
                var e=event.originalEvent || event;
                var old=e.target.value;
                var min=parseInt(e.target.dataset.min),max=parseInt(e.target.dataset.max);
                if(e.data && !isNaN(old)){
                    //console.info(old,min,max,old>max || old<min);
                    if(old>max || old<min){
                        e.target.value=old.substring(0,old.length-1);
                    }else{
                        e.target.value=parseInt(old);
                    }
                }else{
                    var tmp;
                    for(var i=old.length;i>0;i--){
                        tmp=old.substring(0,i);
                        //console.info(tmp)
                        if(!isNaN(tmp) && tmp<=max && tmp>=min){
                            e.target.value=tmp;
                            break;
                        }
                        if(tmp.length==1)e.target.value="";
                    }
                }
            });

Answer 2

亲测完美解决 并且限制除数字以外一切字符的输入
computed 计算属性的 getter setter 是很有用的属性

<input type=text v-model="value2">
data() {
    return {
      value1: "10"
    };
  },
  computed: {
    value2: {
      get() {
        var  value = this.value1.replace(/[^\d]+/g, '');
        if(value<=0){
          return 0
        }else if(value>=100){
          return 100
        }else{
          return value
        }
      },
      set(val) {
        this.value1 = val;
      }
    }
  },

Answer 3

尝试拆分v-model为@input="function" :value="UploadInfoModel.ER"
另外，你这个@keyup的响应方法return true是要干嘛