关于vue中input双向数据绑定
我们要实现的原理是,当用户输入一个值,不正确时,程序主动更改这个内容。首先,我们的input框是type=number 类型的;通过v-on:input事件监听用户的输入;min和max控制参数的大小。<input type="number" min="0" max="300" step="10"v-mo
·
我们要实现的原理是,当用户输入一个值,不正确时,程序主动更改这个内容。
首先,我们的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;
},
更多推荐
已为社区贡献11条内容
所有评论(0)