v-model#
给表单元素使用，用于让表单的value值与data中的数据进行双向数据绑定，彼此间互相影响（可以快速 获取 或 设置 表单元素内容）
双向数据绑定：
- 数据变化 => 视图自动更新
- 视图变化 => 数据自动更新
文本框#
1<template>
2 <div>
3 <input type="text" v-model="txtVal" />
4 <p>{{ txtVal }}</p>
5 </div>
6</template>
7
8<script>
9export default {
10 data() {
11 return {
12 txtVal: "",
13 };
14 },
15};
16</script>下拉框#
1<template>
2 <div>
3 <select v-model="selVal">
4 <option value="beijing">北京</option>
5 <option value="shanghai">上海</option>
6 <option value="guangzhou">广州</option>
7 <option value="shenzhen">深圳</option>
8 </select>
9 <p>{{ selVal }}</p>
10 </div>
11</template>
12
13<script>
14export default {
15 data() {
16 return {
17 selVal: "",
18 };
19 },
20};
21</script>单选按钮#
1<template>
2 <div>
3 <input type="radio" v-model="gender" value="man" />男
4 <input type="radio" v-model="gender" value="woman" />女
5 <p>{{ gender }}</p>
6 </div>
7</template>
8
9<script>
10export default {
11 data() {
12 return {
13 gender: "man",
14 };
15 },
16};
17</script>复选按钮#
1<template>
2 <div>
3 <input type="checkbox" v-model="hobby" value="eat" />吃饭
4 <input type="checkbox" v-model="hobby" value="sleep" />睡觉
5 <input type="checkbox" v-model="hobby" value="play" />打豆豆
6 <p>{{ hobby }}</p>
7 </div>
8</template>
9
10<script>
11export default {
12 data() {
13 return {
14 hobby: [],
15 };
16 },
17};
18</script>目录