时间戳

首页 > 技术文章 > 表单输入绑定

表单输入绑定

zzdshidashuaige 2021-08-15 16:16 原文

表单输入绑定

单行文本输入框

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<input type="text" v-model="message" value="Hello Vue.js">
			<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的值，而不是value属性的值。这是因为v-model指令会忽略所有表单元素的value、checked、selected属性的初始值，而总是将当前活动实例的数据属性作为数据来源。所以我们应该在js脚本中或是在组件的data选项中声明初始值。

v-model提供了一个trim修饰符，可以自动过滤输入数据首尾的空白字符。

v-model还有.lazy修饰符。默认情况下v-model在每次input事件触发后将输入框的值与数据进行同步，如果使用了该修饰符则会转变为使用change事件进行同步。

如果想自动将用户输入的数据转换为数值类型，可以给v-model加number修饰符。

多行文本输入框

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

复选框

复选框单独使用时，v-model绑定的是布尔值，多个一起使用时绑定的是同一个数组，选中的复选框的值将被保存到数组中。

<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>

对于这种一组复选框一起使用的场景，可以考虑将变化的部分抽取出来放到组件实例的data中，定义为一个对象或数组，然后通过v-for指令循环渲染输出。

单选按钮

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

<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或0；对于单选按钮，v-model监听的是change事件。

选择框

<!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>

值绑定

复选框

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

<div id="app">
    <input id="agreement" type="checkbox" v-model="isAgree" true-value="yes" false-value="no">
    <label for="agreement">{{ isAgree }}</label>
</div>

<script>
	const vm = Vue.createApp({
        data(){
            return {
                isAgree:false
            }
        }
    }).mount('#app');
</script>

isAgree初始值为false，当选中复选框时，其值为true-value的值，之后再取消复选框，其值为false-value的值。

这两个属性还可以使用v-bind绑定到数据属性上：

<div id="app">
    <input id="agreement" type="checkbox" v-model="isAgree" :true-value="trueVal" :false-value="falseVal">
    <label for="agreement">{{ isAgree }}</label>
</div>

<script>
	const vm = Vue.createApp({
        data(){
            return {
                isAgree:false,
                trueVal:'真',
                falseVal:'假'
            }
        }
    }).mount('#app');
</script>

单选按钮

单选按钮被选中时，v-model绑定的数据属性的默认值为该单选按钮的value值，可以将value属性绑定到另一个属性：

<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>
	const vm = Vue.createApp({
        data(){
            return {
                gender:'',
                fenderVal:['帅哥','美女']
            }
        }
    }).mount('#app');
</script>

选择框的选项

通过选择框选择内容后，其值是选项的值(option元素的value属性的值)，选项的value属性也可以使用v-bind指令绑定到一个数据属性上。

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

实例：用户注册

在单页应用程序程序中，用户注册在提交时使用AJAX发送数据到服务端，数据格式采用JSON格式，在表单提交前，通常使将要发送的数据先组织为一个js对象或数组，然后转换为JSON字符串进行发送。可以使用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事件响应函数中完成的用户注册数据的发送，并不希望表单的默认行为发生。

推荐阅读