15vue学习_经典练习3--v-model--注册表单提交

最新推荐文章于 2022-07-15 19:23:38 发布

chencaw

最新推荐文章于 2022-07-15 19:23:38 发布

阅读量284

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113702489

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

v-model数据绑定

<!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="../js/vue.js"></script>
		<script>
			var vm = new Vue({
		    el: '#app',
		    data: {
		     	user: {
		     		username: '',
		     		password: '',
		     		gender: '',
		     		email: '',
		     		pwdQuestion: '',
		     		pwdAnswer: ''
		     	}
		    },
		    methods: {
		    	register: function(){
		    		//直接发送this.user对象
		    		//...
		    		console.log(this.user);
		    	}
		    }
		  });
		</script>
	</body>
</html>

chencaw

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
15vue学习_经典练习3--v-model--注册表单提交

v-model数据绑定<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <div id = "app"> <form> <table border="0"> <tr> <td>
复制链接

扫一扫