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

亲测完美解决 并且限制除数字以外一切字符的输入computed 计算属性的 getter setter 是很有用的属性<input type=text v-model="value2">data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; value1: "10"&nbsp; &nbsp; };&nbsp; },&nbsp; computed: {&nbsp; &nbsp; value2: {&nbsp; &nbsp; &nbsp; get() {&nbsp; &nbsp; &nbsp; &nbsp; var &nbsp;value = this.value1.replace(/[^\d]+/g, '');&nbsp; &nbsp; &nbsp; &nbsp; if(value<=0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 0&nbsp; &nbsp; &nbsp; &nbsp; }else if(value>=100){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return 100&nbsp; &nbsp; &nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return value&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; set(val) {&nbsp; &nbsp; &nbsp; &nbsp; this.value1 = val;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },

Answer 2

<[e-mail]="scope.row.release_proportion=loadNumber(scope.row)"type="text"placeholder="填100以内的整数" v-model="scope.row.release_proportion" ></el-input>loadNumber(row){var elValue = row.release_proportionvar reg = /^((?!0)\d{1,2})$/;if (!reg.test(elValue)) {row.release_proportion = "";}return row.release_proportion},