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指令只能配合表单元素一起使用。
为了方便对用户输入的内容进行处理，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>
