我们要实现的原理是,当用户输入一个值,不正确时,程序主动更改这个内容。
在这里插入图片描述
首先,我们的input框是type=number 类型的;通过v-on:input事件监听用户的输入;min和max控制参数的大小。

 <input type="number" min="0" max="300" step="10"  v-model.number="s.score" placeholder="总分" v-on:input="checkScoreNum(s, 'score')">
 <input type="number" v-model.number="totalScore" min="100" max="1200"  placeholder="总分" v-on:input="checkScoreNum($data, 'totalScore')">

ps:在checkScoreNum()事件中,我们通过传入整个对象s / $data 和一个对象的属性’totalScore’ ,在这里 $data相当于 vue 生命周期中的 data.
切记不可直接操作dom元素来改变 v-model 的值,因为vue双向数据绑定的原理,所以直接操作dom的话是无法改变数据的。

 checkScoreNum: function (obj, property) {
            var num = event.target.value;
            if (num < 0 ) {
                num = Math.abs(num);
            }else if(num.toString().length > 3){
                num = num.toString().substring(0, 3);
            }
            obj[property] = num;
        },
Logo

前往低代码交流专区

更多推荐