【Vue.js】010-表单输入绑定：v-model

訾博ZiBo

发布于 2025-01-06 15:18:38

8400

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

一、基础用法

1、概述（官方）

v-model双向绑定，一个地方改变另一个地方也会随之改变，就像是一个公共变量一样；

2、代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 文本 -->
			<input v-model="message" placeholder="edit me">
			<p>Message is: {{ message }}</p>
			<br />
			<!-- 多行文本 -->
			<textarea v-model="message" placeholder="add multiple lines"></textarea>
			<br />
			<span>Multiline message is:</span>
			<p style="white-space: pre-line;">{{ message }}</p>
			<br />
			<!-- 单选框 -->
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox">{{ checked }}</label>
			<br />
			<!-- 复选框 -->
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br />
			<span>Checked names: {{ checkedNames }}</span>
			<br>
			<!-- 单选按钮 -->
			<input type="radio" id="one" value="One" v-model="picked">
			<label for="one">One</label>
			<br />
			<input type="radio" id="two" value="Two" v-model="picked">
			<label for="two">Two</label>
			<br />
			<span>Picked: {{ picked }}</span>
			<br />
			<!-- 选择框：单选 -->
			<select v-model="selected">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span>Selected: {{ selected }}</span>
			<br />
			<!-- 选择框：多选 -->
			<select v-model="selected1" multiple style="width: 50px;">
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<br />
			<span>Selected: {{ selected1 }}</span>
			<br />
			<!-- 用 v-for 渲染的动态选项 -->
			<select v-model="selected2">
				<option v-for="option in options" v-bind:value="option.value">
					{{ option.text }}
				</option>
			</select>
			<span>Selected: {{ selected2 }}</span>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					message: "",
					checked: false,
					checkedNames: [],
					picked: "",
					selected: "",
					selected1: [],
					selected2: "A",
					options: [{
							text: 'One',
							value: 'A'
						},
						{
							text: 'Two',
							value: 'B'
						},
						{
							text: 'Three',
							value: 'C'
						}
					]
				}
			});
		</script>
	</body>
</html>

3、运行结果

二、值绑定

1、概述（官方）

代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="radio" v-model="picked" value="这是值,点击之后显示!" />
			<h2>{{picked}}</h2>
		</div>
		<script src="../../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
					// 选择之后内容变成value的内——“这是值,点击之后显示!”
					picked:"目前为空！未选择呢！"
				}
			})
		</script>
	</body>
</html>