29.Vue训练v_model收集表单数据

最新推荐文章于 2022-04-21 11:00:05 发布

修罗_

最新推荐文章于 2022-04-21 11:00:05 发布

阅读量161

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45843676/article/details/122996890

版权

VUE 专栏收录该内容

93 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="./vue.js"></script>
		<style type="text/css">
			label {
				-ms-user-select: none;
				-moz-user-select: none;
				-webkit-user-select: none;
			}
		</style>
	</head>
	<body>
		<div id="root">
			<!-- prevent阻止表单提交默认行为(跳转页面) -->
			<form @submit.prevent="demo">
				<label for="account">账号:</label>
				<!-- trim去除两边空格 -->
				<input type="text" v-model.trim="account" id="account" />
				<br><br>
				<label for="password">密码:</label>
				<input type="password" v-model="password" id="password" />
				<br><br>
				<label for="age">年龄:</label>
				<!-- v-model.number将字符串转为数值 -->
				<input type="number" v-model.number="age" id="age" />
				<br><br>
				性别:
				<input type="radio" v-model="sex" value="男" id="man" name="sex" />
				<label for="man">男</label>
				<input value="女" v-model="sex" style="margin-left: 20px;" type="radio" id="lady" name="sex" />
				<label for="lady">女</label>
				<br><br>
				爱好:
				<input type="checkbox" v-model="hobby" value="学习" id="study" />
				<label for="study">学习</label>
				<input type="checkbox" v-model="hobby" value="打游戏" id="play_game" />
				<label for="play_game">打游戏</label>
				<input type="checkbox" v-model="hobby" value="吃饭" id="eat" />
				<label for="eat">吃饭</label>
				<br><br>
				所选校区
				<select v-model="city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="wuhan">武汉</option>
				</select>
				<br><br>
				其他信息:
				<!-- v-model.lazy失去焦点时收集数据 -->
				<textarea v-model.lazy="other" ></textarea>
				<br><br>
				<input v-model="agree" type="checkbox">阅读并接受<a href="https://www.baidu.com/">《用户协议》</a>
				<button type="submit">提交</button>
			</form>
		</div>
	</body>
</html>

<script type="text/javascript">
	const userInfo = {
		account: '',
		password: '',
		sex: '男',
		age: 19,
		hobby: [],
		city: 'beijing',
		other: '',
		agree: false
	};
	const vm = new Vue({
		el: '#root',
		data: function() {
			return userInfo;
		},
		methods: {
			demo() {
				console.log(JSON.stringify(userInfo));
			}
		}
	});
</script>