首页 > 编程语言 > v-model的基本用法解析
2020
10-20

v-model的基本用法解析

一、本节说明

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

二、 怎么做

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

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

三、 效果

四、 深入

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

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

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

作者:字母哥博客

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

编程技巧