3.7 双向绑定指令
vue提供了 v-model双向绑定指令 ，用来辅助开发者在 不操作DOM 的前提下，快速 获取表单数 据。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 文本框的输入会实时更新到data中的username --> <input type="text" v-model="username"> <!-- vue会把data中的username的数据实时绑定到标签中 --> <p>姓名：{{ username }}</p> <hr> <!-- 属性绑定，不能将文本框的输入实时更新到username中 --> <!-- 单向绑定 --> <!-- 只能vue实时把数据更新到标签中 --> <input type="text" :value="username"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: '' } }) </script> </body> </html>
输入123
注意：
v-model指令只能配合表单元素一起使用。
3.7.1 v-model 指令的修饰符
为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：
| 修饰符 | 作用 | 示例 |
| .number | 自动将用户的输入值转为数值类型 | <input v-model.number="age" /> |
| .trim | 自动过滤用户输入的首尾空白字符 | <input v-model.trim="msg" /> |
| .lazy | 在“change”时而非“input”时更新 | <input v-model.lazy="msg" /> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app"> 姓名：<input type="text" v-model.trim="username" /> <hr /> 年龄：<input type="text" v-model.number="age" /> <hr /> 地址：<input type="text" v-model.lazy="address" /> </div> <script src="./lib/vue-2.6.12.js"></script> <script> const vm = new Vue({ el: '#app', data: { // 姓名 username: 'zs', // 年龄 age: 1, // 地址 address: '北京市', }, }) </script> </body> </html>
