好资源导航 » 文章资讯 » Vue 的 v-model用法实例

Vue 的 v-model用法实例

2023-07-10 23:39:04 207

Vue框架早已经不是MVVM（Mode-View-View-Model）双向绑定了。早在Vue1.0时代，Vue在刚出世的时候的确是MVVM双向绑定。自Vue2.0以来，Vue就不再是双向绑定了，而是像React一样是单向绑定MV（Model-View）了。但是，在Vue中仍保留了双向绑定的接口，v-model就是。

1.基本用法

v-model帮我们做的事就是，为input的value值设置一个动态绑定，然后在输入框的input事件触发后实时修改动态绑定的value的变量值。因此v-model实质是上述方式的语法糖。

$event是原生DOM事件里的event事件对象。

3.v-model的修饰符

所有修饰符都是起一个辅助的作用，其实可以在函数里自己判断条件实现。.lazyv-model默认监听的是输入框的input事件，原生DOM的input事件就是记录实时的输入变化值。但是，我们有时不需要实时记录结果，只需要记录最终输入的结果值就可以了。

input的原生DOM事件中还有一个change事件，该事件是在输入框失去焦点时或按下回车键时执行的。v-model里以.lazy修饰符的方式切换至该监听模式。

等价于：

.number.number修饰符是在输入内容改变后进行变量赋值时，自动使用parseFloat()函数将其变成数字。使用该修饰符时变量的初始值必须是数字。

.trim

.trim修饰符是将输入的内容改变后进行变量赋值时，自动忽略和去除前后的空格。更为精准地记录输入的字符串内容。

4.自定义输入框的v-modelv-model

的基本用法仅仅适用于原生的输入框元素，对于用户自己封装的输入框，可以用如下方式使用v-model。当用在组件上时，v-model的实质如下：



等价于：

因此，在自定义表单组件里的写法如下：






.wrapper{
border:2pxsolidblue;
display:inline-block;
}
.wrapperinput{
color:red;
}

补充：若想在自定义组件里面的原生输入框也使用v-model，可以根据组件v-model的实质，使用计算属性的赋值方式为=使用。

以上就是Vue的v-model用法实例的详细内容，更多关于vuev-model的资料请关注毛票票其它相关文章！

返回顶部
3162201930
czq8825@qq.com

Vue 的 v-model用法实例

热门推荐

随机推荐