看一个例子：
<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指令的作用就是便捷地设置和获取表单元素的值。
绑定的数据会和表单元素值进行关联。
其中一个改变都会导致另一个的改变。
原文：https://www.cnblogs.com/xiximayou/p/12320783.html