Javascript

vue收集表单数据

本文主要是介绍vue收集表单数据，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

后台交互传参

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>收集表单数据</title>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		<form @submit.prevent="show">
			<table>
				<tbody>
					<tr>
						<td>账号:</td>
						<td><input type="text" v-model.trim="userInfo.userid"></td>
					</tr>
					<tr>
						<td>密码:</td>
						<td><input type="text" v-model="userInfo.pass"></td>
					</tr>
					<tr>
						<td>年龄:</td>
						<td><input type="text" v-model.number="userInfo.age"></td>
					</tr>
					<tr>
						<td>性别:</td>
						<td>男<input type="radio" v-model="userInfo.sex" value="男">女<input v-model="userInfo.sex" type="radio" value="女"></td>
					</tr>
					<tr>
						<td>爱好:</td>
						<td>学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
						打游戏<input type="checkbox" v-model="userInfo.hobby" value="打游戏">
						吃饭<input type="checkbox" v-model="userInfo.hobby" value="吃饭">
				        </td>
					</tr>
					<tr>
						<td>所属地区:</td>
						<td>
							<select name="" id="" v-model.laze="userInfo.region">
								<option value="北京">北京</option>
								<option value="广东">广东</option>
								<option value="云南">云南</option>
								<option value="东北">东北</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>其他信息：</td>
						<td><textarea v-model="userInfo.others" name="" id="" cols="30" rows="10"></textarea>
						</td>
					</tr>
					<tr>
						<td><input type="checkbox" v-model="agree">阅读并接受《用户协议》</td>
						<td><button>提交</button></td>
					</tr>
				</tbody>
			</table>
			
		</form>
		
		</div>
		<script>
	const vm=new Vue({
		el:'#app',
		data:{
			userInfo:{
				userid:'',
				pass:'',
				age:0,
				sex:'',
				hobby:[],//定义要正确
				region:'',
				others:''
			},
			agree:''
		},
	methods:{
		show(){
			console.log(JSON.stringify(this.userInfo));
		}
	}
	})
		</script>
	</body>
</html>

 

这篇关于vue收集表单数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航