前端vue学习曲线（12）表单输入绑定

最新推荐文章于 2024-08-12 16:53:30 发布

原创最新推荐文章于 2024-08-12 16:53:30 发布 · 246 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue.js中如何进行表单输入绑定，包括文本、多行文本、单个及多个复选框、单选按钮、选择框的绑定，并探讨了修饰符的使用，如.lazy、.number和.trim，帮助开发者更好地理解和掌握Vue.js的表单处理技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.文本内容

<input v-model="message1" placeholder="#文本" />
<p>#文本内容：{{message1}}</p>

2.多行文本内容

<textarea v-model="message2" placeholder="#多行文本"></textarea>
<p style="white-space: pre-line;">#多行文本内容：{{message2}}</p>

3.单个复选框，绑定到布尔值

<input type="checkbox" v-model="checked" id="checked" />
<label for="checked">{{checked}}</label>

4.多个复选框，绑定到同一个数组

<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 />
<p>Checked names：{{checkedNames}}</p>

5.单选按钮

6.选择框

（1）单选

<select v-model="selected1">
	<option disabled value="">请选择</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span>Selected1: {{ selected1 }}</span>

（2）多选

<select v-model="selected2" multiple>
	<option disabled value="">请选择</option>
	<option>A</option>
	<option>B</option>
	<option>C</option>
</select>
<span>Selected2: {{ selected2 }}</span>

（3）用 v-for 渲染的动态选项

<select v-model="selected3">
	<option v-for="option in options" :value="option.value">
		{{option.text}}
	</option>
</select>
<span>Selected3: {{ selected3 }}</span>

7.修饰符

（1）.lazy：在“change”时而非“input”时更新

.lazy:<input v-model.lazy="msg1" >{{msg1}}<br />

（2）.number：自动将用户的输入值转为数值类型

.number:<input v-model.number="msg2" >{{msg2}}<br />

（3）.trim：自动过滤用户输入的首尾空白字符

.trim:<input v-model.trim="msg3" >{{msg3}}<br />

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app1">
			<input v-model="message1" placeholder="#文本" />
			<p>#文本内容：{{message1}}</p>
			<textarea v-model="message2" placeholder="#多行文本"></textarea>
			<p style="white-space: pre-line;">#多行文本内容：{{message2}}</p>
			<p>单个复选框，绑定到布尔值</p>
			<input type="checkbox" v-model="checked" id="checked" />
			<label for="checked">{{checked}}</label>
			<p>多个复选框，绑定到同一个数组</p>
			<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 />
			<p>Checked names：{{checkedNames}}</p>
			<p>#单选按钮</p>
			<input type="radio" id="man" value="男" v-model="sex" />
			<label for="man">男</label>
			<br />
			<input type="radio" id="woman" value="女" v-model="sex" />
			<label for="woman">女</label>
			<br />
			<p>性别：{{sex}}</p>
			<p>#选择框</p>

			<p>单选</p>
			<select v-model="selected1">
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span>Selected1: {{ selected1 }}</span>

			<p>多选</p>
			<select v-model="selected2" multiple>
				<option disabled value="">请选择</option>
				<option>A</option>
				<option>B</option>
				<option>C</option>
			</select>
			<span>Selected2: {{ selected2 }}</span>
			
			<p>用 v-for 渲染的动态选项：</p>
			<select v-model="selected3">
				<option v-for="option in options" :value="option.value">
					{{option.text}}
				</option>
			</select>
			<span>Selected3: {{ selected3 }}</span>
			<p>值绑定</p>
			<p>

				&lt;!-- 当选中时，`picked` 为字符串 "a" --&gt;<br /> 
				&lt;input type="radio" v-model="picked" value="a"&gt;<br /> 
				&lt;!-- `toggle` 为 true 或 false --&gt;<br /> 
				&lt;input type="checkbox" v-model="toggle"&gt;<br /> 
				&lt;!-- 当选中第一个选项时，`selected` 为字符串 "abc" --&gt;<br /> 
				&lt;select v-model="selected"&gt;<br /> 
				&lt;option value="abc"ABC option&gt;<br /> 
				&lt;select&gt;
				<br />
			</p>
			<input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
			{{toggle}}
			<input type="radio" v-model="pick" value="a">{{pick}}
				<p>修饰符</p>
				<p>
				.lazy .number .trim
				</p>
				.lazy:<input v-model.lazy="msg1" >{{msg1}}<br />
				.number:<input v-model.number="msg2" >{{msg2}}<br />
				.trim:<input v-model.trim="msg3" >{{msg3}}<br />
		</div>
	</body>

</html>
<script>
	var app1 = new Vue({
		el: "#app1",
		data: {
			msg1:"",
			msg2:"",
			msg3:"",
			message1: "",
			message2: "",
			checked: false,
			checkedNames: [],
			sex: "",
			selected1: "",
			selected2: [],
			selected3: "A",
			options: [{
					text: 'a',
					value: 'A'
				},
				{
					text: 'b',
					value: 'B'
				},
				{
					text: 'c',
					value: 'C'
				}
			],
			toggle:"",
			pick:""
		}
	})
</script>