1、表单数据双绑定是什么？
①、首先我们先了解一下什么是表单？
然而表单是用来提交数据，规范流程执行过程的格式。
如果对表单还不熟悉的同学们可以去菜鸟教程上学习一下噢！
链接：https://www.runoob.com/html/html-forms.html
②、表单数据是什么呢？
表单数据是表单在网页中主要负责数据采集功能。
例如：你好Vue； 就是表单数据。
③、表单数据双向绑定是什么呢？
我们通过本博客文章《01：Vue是什么》可以了解到MVVM模型，其中M是数据层，V是视图层。
数据双向绑定， 即当数据发生变化的时候， 视图（View）也就发生变化， 当视图发生变化的时候，数据（Model）也会跟着同步变化。
你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。
【如果想了解什么是property ，可以通过本博客文章《02：Vue 基础语法》】
2、表单数据双向绑定
根据前面的层层递进，估计对数据双向绑定有一点了解吧，就是Model层与View层数据互相绑定了，当Model数据变动时候View层会发生改变，当View数据变动时候Model层会发生改变。
代码【input】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的表单数据双绑定</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<input v-model="message">
<p>Message is: {{ message }}</p>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var mv = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
代码【textarea 】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的表单数据双绑定</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<textarea v-model="message"></textarea>
<p style="white-space: pre-line;">Message is: {{ message }}</p>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var mv = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
代码【复选框】：
单选复选框绑定布尔值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的表单数据双绑定</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<input type="checkbox" id="myname" v-model="message">
<label for="myname">{{ message }}</label>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var mv = new Vue({
el: '#app',
data: {
message: 'true'
}
});
</script>
</body>
</html>
多个复选框，可以绑定到一个数组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的表单数据双绑定</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<input type="checkbox" id="lucky" value="Lucky" v-model="checkedNames">
<label for="Lucky">Lucky</label>
<input type="checkbox" id="yun" value="Yun" v-model="checkedNames">
<label for="yun">Yun</label>
<input type="checkbox" id="a注意大小写" value="A注意大小写" v-model="checkedNames">
<label for="a注意大小写">A注意名字大小写</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var mv = new Vue({
el: '#app',
data: {
checkedNames: []
}
});
</script>
</body>
</html>
代码【单选按钮】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的表单数据双绑定</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var mv = new Vue({
el: '#app',
data: {
picked: []
}
});
</script>
</body>
</html>
代码【选择框】：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学习Vue的表单数据双绑定</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var mv = new Vue({
el: '#app',
data: {
selected: 'true'
}
});
</script>
</body>
</html>
如果 v-model 表达式的初始值未能匹配任何选项，“ 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。