Vue v-model如何实现双向数据绑定？

本文共计1046个文字，预计阅读时间需要5分钟。

v-model的基本用法+本节课说明+前面的章节我们学习了v-bind指定，可以通过模型数据去影响视图。我们都知晓VUE支持双向数据绑定，那么视图是如何影响数据的呢？那就得学到我们了。

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绑定radio和checkbox

一、本节说明

在绝大多数的表单操作中，我们不只要收集文本输入的数据，我们还可能用到单选和多选。