表单处理（双向数据绑定）

最新推荐文章于 2024-01-11 14:13:58 发布

drunk喵咪

最新推荐文章于 2024-01-11 14:13:58 发布

阅读量259

点赞数 1

分类专栏： Vue 文章标签：表单处理（双向数据绑定）

本文链接：https://blog.csdn.net/jdrunk/article/details/102670102

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单双向数据绑定</title>
	<!-- 导入vue -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
	<div id="app">
		{{user}}
		<form action="" @submit.prevent="handler">
			姓名 <input type="text" v-model="user.name"> <br>
			密码 <input type="password" v-model="user.password"> <br>
			//复选框和单选框，每个inpit都要绑定v-model
			性别 
				<label> <input type="radio" v-model="user.gender" value="男">男</label>
				<label> <input type="radio" v-model="user.gender" value="女">女</label>
				<br>
			爱好
				<label><input type="checkbox" v-model="user.hobbies" value="篮球">篮球</label>
				<label><input type="checkbox" v-model="user.hobbies" value="足球">足球</label>
				<label><input type="checkbox" v-model="user.hobbies" value="阅读">阅读</label>
				<br>
			地址
				<select v-model="user.address">
					<option value="山西">山西</option>
					<option value="江西">江西</option>
					<option value="甘肃">甘肃</option>
				</select>
				<br>
			介绍
				<textarea v-model="user.description" cols="30" rows="10"></textarea>
				<br>
			<input type="submit" value="提交">
		</form>
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				user:{
					gender:"女",  //默认值
					hobbies:["足球"]   //复选框，声明一个数组存放数值，里面的数据为默认值
				}
			},
			methods:{
				handler(){
					alert(JSON.stringify(this.user));   //提交，打印出user
				}
			}
		})
	</script>
	
</body>
</html>

drunk喵咪

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单处理（双向数据绑定）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表单双向数据绑定</title>  <script src="https://cdn.bootcss.com/vue/2.6.10/v...
复制链接

扫一扫