关于vue中input双向数据绑定

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Amy_cloud/article/details/85127400

我们要实现的原理是，当用户输入一个值，不正确时，程序主动更改这个内容。

首先，我们的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;
        },