看一个例子：
代码语言：javascript复制<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message" @keyup.enter="getMsg">
<input type="button" value="修改" @click="setMsg">
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: '我是黄色',
},
methods: {
getMsg: function () {
alert(this.message);
},
setMsg: function () {
this.message = "修改了message";
},
},
})
</script>
</body>
</html>效果：
修改输入框里面的值，不需要点修改：
下面数据同步更新。
点击修改：
输入框的值和下面的值同步更新。
说明：
v-model指令的作用就是便捷地设置和获取表单元素的值。
绑定的数据会和表单元素值进行关联。
其中一个改变都会导致另一个的改变。
