可以用v-model指令在表单、及<select>元素上创建双向数据绑定。<br />它会根据控件类型自动选取正确的方法来更新元素。<br />它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。</p> <blockquote> <p>v-model会忽略所有表单元素的value、checked、selected特性的初始值, 而总是将 Vue 实例的数据作为数据来源。 你应该通过 JavaScript 在组件的data选项中声明初始值</p> </blockquote> <pre><code class="lang-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <span>{{message}}</span> <hr> <table> <tr> <td>用户名</td> <td><input type="text" name="username" v-model="username"></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd1" v-model="password1"></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="pwd2" v-model="password2"></td> </tr> <tr> <td>性别</td> <td> 男 <input type="radio" name="sex" value="man" v-model="sex"> 女 <input type="radio" name="sex" value="woman" v-model="sex"> </td> </tr> <tr> <td>爱好</td> <td> 足球 <input type="checkbox" name="like" value="足球" v-model="like"> 篮球 <input type="checkbox" name="like" value="篮球" v-model="like"> 兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like"> </td> </tr> </table> <button @click="register">注册</button> </div> </body> <script> var vm = new Vue({ el: "#app", data: { message: "hello", username: "", password1: "", password2: "", sex: "", like: [], }, methods: { register:function () { alert(this.username+this.password1+this.password2+this.sex+this.like); } } }) </script> </html> </code></pre> <p><img src="https://cdn.nlark.com/yuque/0/2021/png/1114755/1618587187416-d0f5fa6f-2921-41bf-bcbc-49bb5bb35805.png#align=left&display=inline&height=208&margin=%5Bobject%20Object%5D&name=image.png&originHeight=208&originWidth=741&size=21779&status=done&style=none&width=741" alt="image.png"></p>
