关于vue中input双向数据绑定

最新推荐文章于 2025-10-18 21:20:52 发布

原创最新推荐文章于 2025-10-18 21:20:52 发布 · 8.9k 阅读

2 ·

CC 4.0 BY-SA版权

Input 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue.js中使用input事件监听与v-model结合，实现对用户输入的有效性和格式进行实时检查与修正。重点讲解了数字类型输入框的最小值、最大值及步长设置，并演示了如何通过自定义函数checkScoreNum动态调整输入值，确保其符合预设条件。

部署运行你感兴趣的模型镜像

我们要实现的原理是，当用户输入一个值，不正确时，程序主动更改这个内容。
在这里插入图片描述
首先，我们的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;
        },

您可能感兴趣的与本文相关的镜像