文章/答案/技术大牛

发布

社区首页 >专栏 >Vue表单输入绑定

Vue表单输入绑定

别团等shy哥发育

发布于 2023-02-25 08:02:05

7.4K00

代码可运行

文章被收录于专栏：全栈开发那些事全栈开发那些事

运行总次数：0

代码可运行

文章目录

1、简介

表单控件的数据绑定就是用v-model指令实现的，它会根据控件类型自动选取正确的方法更新元素。由于表单控件有不同的类型，如文本输入框、复选框、单选按钮、选择框等，v-model指令在不同的表单控件上应用时也会有所差异。

2、单行文本输入框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input :value="message" @input="message = $event.target.value" />
			<p>message：{{message}}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            message: 'Java无难事'
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

在<input>元素中，使用value属性设置了一个“Hello Vue.js”，用v-model指令绑定一个表达式message,对应的数据属性是message。从上面渲染的结果可看出，文本输入框中显示的是数据属性message的值，而并没有看到<input>元素的value属性的值。这是因为v-model指令会忽略所有表单元素的value、checked、selected属性的初始值，而总是将当前活动实例的数据属性作为数据来源。我们应该总是在JavaScript脚本中声明初始值，或者在组件的data选项中声明初始值。在文本框中输入数据，可以看到输入框下方的内容也会同时发生改变。

用户在输入数据的时候，往往会不经意地在示例数据前后输入了空格字符，或者在粘贴数据时不小心带上了制表符，表单的数据通常是要提交到服务端的，因此在提交之前需要编写javaScript代码对数据做一些验证，包括去掉数据前后的空白字符。v-model指令提供了一个trim修饰符，可以帮我们自动过滤输入数据首尾的空白字符，修改上述代码如下：

<input type="text" v-model.trim="message" value="Hello Vue.js">

除了trim修饰符之外，v-model指令还可以使用下面两个修饰符。

.lazy 默认情况下v-model在每次input事件触发后将输入框的值与数据进行同步，如果使用了该修饰符，则会转变为change事件进行同步。
.number 如果想自动将用户的输入数据转为数值类型，可以给v-model添加number修饰符。这通常很有用，因为即使在type="number"时，HTML输入元素的值也总是返回字符串。如果这个值无法被parseFloat()解析，则会返回原始值。

3、多行文本输入框

<textarea v-model="message"></textarea>

4、复选框

复选框在单独使用和多个复选框一起使用时，v-model绑定的值会有所不同，对于前者，绑定的是布尔值，选中则值为true,未选中则值为false;后者绑定的是同一个数组，选中的复选框的值将被保存到数组中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h3>单个复选框：</h3>
			<input id="agreement" type="checkbox" v-model="isAgree">
			<label for="agreement">{{ isAgree }}</label>
			
			<h3>多个复选框：</h3>
			<input id="basketball" type="checkbox" value="篮球" v-model="interests">
		    <label for="basketball">篮球</label>
		    <input id="football" type="checkbox" value="足球" v-model="interests">
		    <label for="football">足球</label>
		    <input id="volleyball" type="checkbox"  value="排球" v-model="interests">
		    <label for="volleyball">排球</label>
		    <input id="swim" type="checkbox"  value="游泳" v-model="interests">
		    <label for="swim">游泳</label>
		  
		    <p>你的兴趣爱好是: {{ interests }}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
		<script>
			const vm = Vue.createApp({
    		    data() {
    		        return {
    		            isAgree: false,
    		            interests: []
    		        }
    		    }
		    }).mount('#app');
		</script>
	</body>
</html>

渲染结果：

5、单选按钮

当单选按钮被选中时，v-model指令绑定的数据属性的值会被设置为该单选按钮的value值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input id="male" type="radio" value="1" v-model="gender">
			<label for="male">男</label>
			<br>
			<input id="female" type="radio" value="0" v-model="gender">
			<label for="female">女</label>
			<br>
			<span>性别：{{ gender }}</span>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            gender: ''
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

当选中“男”时，gender的值为1；当选中“女”时，gender的值为0. 对于单选按钮，v-model指令监听的是change事件。

6、选择框

与复选框类似，因为选择框既可以是单选，也可以是多选（指定<select>元素的multiple属性），因此，v-model在这两种情况下的绑定值会有所不同。单选时，绑定的是选项的值（<option>元素value属性的值）;多选时，绑定到一个数组，所有选中的选项的值被保存到数组中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<h3>单选选择框</h3>
			<select v-model="education">
				<option disabled value="">请选择您的学历</option>
				<option>高中</option>
				<option>本科</option>
				<option>硕士</option>
				<option>博士</option>
			</select>
			<p>您的学历是：{{ education }}</p>
			<h3>多选选择框</h3>
			<select v-model="searches" multiple>
				<option v-for="option in options" :value="option.value">
					{{ option.text }}
				</option>
			</select>
			<p>您选择的搜索引擎是：{{ searches }}</p>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            education: '',
        		     	searches: [],
        		     	options: [
        		     		{text: '百度', value: 'baidu.com'},
        		     		{text: '谷歌', value: 'google.com'},
        		     		{text: '必应', value: 'bing.com'}
        		     	]
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

单选选择框v-model绑定的是数据属性education,选中“硕士”时，education的值是字符串“硕士”。多选选择框绑定的是数据属性searches(数组类型)，如果同时选中百度、谷歌、必应，值为[“baidu.com”,“google.com”,“bing.com”]。重复的元素可以使用v-for指令循环渲染，这里的多选选择框的选项元素<option>就是使用v-for渲染的，我们需要做的就是把数据部分抽取出来，组织成一个对象或数组，在组件实例的data选项中定义好。对于选择框，v-model监听的是change事件。

7、值绑定

v-model正对不同的表单控件，绑定的值都有默认的约定。例如，单个复选框绑定的是布尔值，多个复选框绑定的是一个数组，选中的复选框value属性的值被保存到数组中。有时候可能想改变默认的绑定规则，那么可以利用v-bind把值绑定到当前活动实例的一个动态属性上，并且这个属性的值可以不是字符串。

7.1 复选框

在使用复选框时，在<input>元素上可以使用两个特殊的属性true-value和false-value来指定选中状态下和未选中状态下v-model绑定的值是什么。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
		    
			<input id="agreement" type="checkbox" v-model="isAgree"
			  	true-value="yes"
			  	false-value="no">
			<label for="agreement">{{ isAgree }}</label>
			
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            isAgree: false
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

数据属性isAgree的值初始为false,当选中复选框时，其值为true-value属性的值:yes,之后再取消复选框，其值为false-value属性的值:no。 true-value属性和false-value属性也可以使用v-bind，将它们绑定到data选项中的某个数据属性上。代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
		    
			<!-- <input id="agreement" type="checkbox" v-model="isAgree"
			  	true-value="yes"
			  	false-value="no"> -->
			
			
			<input id="agreement" type="checkbox" v-model="isAgree"
			  	:true-value="trueVal"
			  	:false-value="falseVal">
			<label for="agreement">{{ isAgree }}</label>
			
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            isAgree: false,
        	    	    trueVal: '真',
        	    	    falseVal: '假'
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

数据属性isAgree的值初始为false,当选中复选框时，其值为true-value绑定的数据属性trueVal的值：真，之后再取消复选框，其值为false-value绑定的数据属性falseVal的值：假。如下图

7.2 单选按钮

单选按钮选中时，v-model绑定的数据属性的值默认被设置为该单选按钮的value值，可以使用v-bind将<inout>云南苏的value属性再绑定到另一个数据属性上，这样选中后的值就是这个value属性绑定的数据属性的值。代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input id="male" type="radio" v-model="gender"
					:value="genderVal[0]">
			<label for="male">男</label>
			<br>
			<input id="female" type="radio" v-model="gender"
					:value="genderVal[1]" >
			<label for="female">女</label>
			<br>
			<span>性别：{{ gender }}</span>
		</div>
	
		<script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        	            gender: '',
        		    	genderVal: ['帅哥', '美女']    
        	        }
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

7.3 选择框的选项

通过选择框选择内容后，其值时选项的值（<option>元素的value属性的值），选项的value属性也可以使用v-bind指令绑定到一个数据属性上。代码如下：

<option v-for="option in options" v-bind:value="option.value">

8、实例：用户注册

在单页应用程序中，用户注册在提交时使用Ajax发送数据到服务端，数据格式采用JSON格式，JSON是JavaScript对象字面量语法的子集，在表单提交前，通常是将要发送的数据先组织为一个javaScript对象或数组，然后转换为JSON字符串进行发送。使用Vue.js,数据组织为对象的过程就变得异常简单了。可以使用v-model指令将输入控件绑定到某个对象的属性上，然后使用v-on指令绑定提交按钮的click事件，在事件处理函数中直接发送该对象即可。完整代码如下所示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>用户注册</title>
	</head>

	<body>
		<div id = "app">
		<form>
			<table border="0">
				<tr>
					<td>用户名:</td>
					<td>
						<input type="text" name="username" v-model="user.username">
					</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td>
						<input type="password" name="password" v-model="user.password">
					</td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="gender" value="1" v-model="user.gender">男
						<input type="radio" name="gender" value="0" v-model="user.gender">女
					</td>
				</tr>
				<tr>
					<td>邮件地址：</td>
					<td>
						<input type="text" name="email" v-model="user.email">
					</td>
				</tr>
				<tr>
					<td>密码问题：</td>
					<td>
						<input type="text" name="pwdQuestion" v-model="user.pwdQuestion">
					</td>
				</tr>
				<tr>
					<td>密码答案：</td>
					<td>
						<input type="text" name="pwdAnswer" v-model="user.pwdAnswer">
					</td>
				</tr>
				<tr>
					<td>
						<input type="submit" value="注册" @click.prevent="register">
					</td>
					<td><input type="reset" value="重填"></td>
				</tr>
			</table>
		</form>
	  </div>
	
        <script src="https://unpkg.com/vue@next"></script>
        <script>
        	const vm = Vue.createApp({
        	    data() {
        	        return {
        		        user: {
        		     		username: '',
        		     		password: '',
        		     		gender: '',
        		     		email: '',
        		     		pwdQuestion: '',
        		     		pwdAnswer: ''
        	     	    }
        	        }
        	    },
        	    methods: {
        	    	register: function(){
        	    		//直接发送this.user对象
        	    		//...
        	    		console.log(this.user);
        	    	}
        	    }
            }).mount('#app');
        </script>
	</body>
</html>

在”提交“按钮上，我们绑定click事件时使用了.prevent修饰符，这是因为本实例是在click事件响应函数中完成的用户注册数据的发送，并不希望表单的默认提交行为发生，因此使用.prevent修饰符来阻止表单的默认提交行为。输入用户注册信息，然后单击”注册“按钮，在浏览器的Console窗口中将看到以下用户信息。