本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
上一节我们对 v-on指令进行了补充的讲解，知道了它更多的用法，但是无论使用哪一种，都是在代码中预先定义好的内容。
一、v-model指令语法介绍
而我们在 web 开发中，经常需要去获取用户的输入，这也是我们这节所学的内容：v-model指令
它可以十分便捷的把表单元素的值和实例中的数据关联起来，这样我们就可以十分便捷的获取以及设置表单元素的值了。
当然它也有一个别的叫法叫做：双向数据绑定。
有了我们 v-model指令以后，我们就可以十分便捷的把表单元素的值和data中的数据进行绑定，
那么无论是设置，还是获取都会变得特别的简单快捷。
编辑
什么叫做双向呢？
当运行代码解析以后 message的值，就会同步到我们表单元素上。然后当我们更改表单元素的值以后，它也会把这次的更新同步到我们的 message上面，那么一来一回，这不就是两个方向嘛。所以双向数据绑定里面的双向，指的就是你更改两边的任何一边，他们都会同步更新对方的值。
编辑
二、实例代码演示
1、实例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>18_v-model双向数据绑定</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getM"><br>
<h2>{{message}}</h2><br>
<input type="button" v-model="message" @click="setM">
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "你好,春天!",
},
methods: {
getM:function(){
alert(this.message);
},
setM:function () {
this.message = "你也好！";
}
},
})
</script>
</body>
</html>
2、效果展示
编辑
当改变表单-文本值为“你好,春天!123”，
h2标签-插值表达式的值，也变为“你好,春天!123”，
说明：data中message值变为“你好,春天!123” 了
同时按下enter键，getM方法获取到的值，如下图弹出框
再次说明：data中message值为“你好,春天!123”。
所以说：改变表单-文本值，data中message值也相应改变
编辑
当我点击下面的按钮，setM方法修改data中message值，
h2标签-插值表达式的值、表单-文本值 都变为“你也好”
说明：data中message值改变，表单-文本值也相应改变
编辑
三、内容-总结
编辑
