v-model的基本用法解析

【字号: 日期:2022-06-23浏览:34作者:雯心

一、本节说明

前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图。我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model。v-model可以将表单输入绑定到对应的模型数据。

二、 怎么做

我们通过v-model实现一个简单的需求

通过表单input绑定模型数据message,表单数据变化data.message也发生变化然后通过Mustache表达式,将变化之后的message数据显示到视图页面上

v-model的基本用法解析

三、 效果

v-model的基本用法解析

四、 深入

v-model实际上是一个语法糖,也就是简写,他实际上包含了两个操作:

v-bind绑定value属性 v-on监听表单元素的输入事件,并改变数据

所以,下面的两种写法实现的效果是一致的。

v-model的基本用法解析

作者:字母哥博客

以上就是v-model的基本用法解析的详细内容,更多关于v-model的基本用法的资料请关注乐呵呵网其它相关文章!

相关文章: