Vue24 收集表单数据 实例

实例

DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据title>
		<script type="text/javascript" src="../js/vue.js">script>
	head>
	<body>
		
		
		<div id="root">
			<form @submit.prevent="demo">
				账号:<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码:<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄:<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别:
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male"><input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好:
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区option>
					<option value="beijing">北京option>
					<option value="shanghai">上海option>
					<option value="shenzhen">深圳option>
					<option value="wuhan">武汉option>
				select>
				<br/><br/>
				其他信息:
				<textarea v-model.lazy="userInfo.other">textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》a>
				<button>提交button>
			form>
		div>
	body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	script>
html>

Vue24 收集表单数据 实例_第1张图片

你可能感兴趣的:(Vue,javascript,vue.js,前端)