08-Vue指令之v-model

Vue指令：v-model 双向绑定

  • v-model：表单元素的双向数据绑定。数据更新元素会更新、元素更新数据也会更新。
  • v-model在不同的表单元素上使用
    • 在input和textarea是value的值
    • 在单选框中，为选中的value的值
    • 在复选框中，是一个数组，每一项是选中的value的值
    • 在下拉框中，单选下拉框是选中的option中的值，多选是一个数组，每一项是选中的option中的值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue指令之v-model</title>
	</head>
	<body>
		<div id="app">
			<!-- 1. 绑定 input text -->
			<input type="text" v-model="inputData">
			<br>
			※输入的信息是：{{ inputData }}
			<hr>
			<!-- 2. 绑定 input checkbox -->
			<input type="checkbox" value="苹果" v-model="checkSelected">苹果
			<input type="checkbox" value="香蕉" v-model="checkSelected">香蕉
			<input type="checkbox" value="橘子" v-model="checkSelected">橘子
			<br>
			※选中的结果是：{{ checkSelected }}
			<hr>
			<!-- 3. 绑定 input radio -->
			<input type="radio" value="吃一个" v-model="radioSelected">吃一个
			<input type="radio" value="吃两个" v-model="radioSelected">吃两个
			<input type="radio" value="吃三个" v-model="radioSelected">吃三个
			<br>
			※选中的结果是：{{ radioSelected }}
			<hr>
			<!-- 4. 绑定 one select option-->
			<select v-model="selectOptional">
				<option value="China">中国</option>
				<option value="USA">美国</option>
				<option value="JAPAN">日本</option>
			</select>
			<br>
			※选中的结果是：{{ selectOptional }}
			<hr>
			<!-- 5. 绑定 multi select option -->
			<select v-model="selectOptionals" multiple>
				<option value="Java">Java</option>
				<option value="PHP">PHP</option>
				<option value="C++">C++</option>
				<option value="VB.net">VB.net</option>
				<option value="Perl">Perl</option>
			</select>
			<br>
			※选中的结果是：{{ selectOptionals }}
		</div>
	</body>
	<script src="js/vue.js" type="text/javascript"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				inputData: "",
				checkSelected: [],
				radioSelected: "",
				selectOptional: "",
				selectOptionals: [],
			}
		})
	</script>
</html>

浏览器中的显示结果

PS：如有任何问题，欢迎在下面评论区留言，让我们共同进步，非常感谢！（^o^）v

web前端开发 > Vue
#JavaScript #web前端 #Vue
08-Vue指令之v-model
https://liaoliaocode.xyz/article/f2d4/
作者
Brian.Gao
发布于
2022年4月12日
许可协议