Vue处理表单(双向数据绑定)

最新推荐文章于 2023-06-06 10:23:14 发布

無事咕咕

最新推荐文章于 2023-06-06 10:23:14 发布

阅读量1.5k

点赞数

分类专栏：日志文章标签： HTML VUE 新手

本文链接：https://blog.csdn.net/qq_45038715/article/details/102670067

版权

日志专栏收录该内容

12 篇文章 1 订阅

订阅专栏

用HTML写一个表单

<div id="app">
		<form action="	">
			姓名<input type="text"><br>	
			密码<input type="text"><br>	
			性别
			<label ><input type="radio" value="男">男</label>
			<label ><input type="radio" value="女">女</label>
			<br>
			爱好
			<label><input type="checkbox" value="篮球">篮球</label>
			<label><input type="checkbox" value="音乐">音乐</label>
			<br>
			地址
			<select >
				<option value="上海">上海</option>
				<option value="江苏">江苏</option>
				<option value="浙江">浙江</option>
			</select>
			<br>
			介绍
			<textarea cols="30" rows="10"></textarea>
			<br>
			<input type="submit" value="提交">
		</form>
	</div>

如图：在这里插入图片描述

双向数据绑定（vue）

一个表单正常情况下点击提交，会获取数据提交到后台。由于我们没有后台，所有做一个简单的提交事件。
在form里面添加代码，

<form @submit.prevent="handler">

使其实现点击提交按钮阻止默认行为，并且执行handler。
然后再vue中让handler获取表单值，

<script>
		new Vue({
			el:"#app",
			data:{
				student:{
				}
			},
			methods:{
				// 获取表单值
				handler(){
					alert(JSON.stringify(this.student));
				}
			}
		})
	</script>

绑定数据使用指令v-model=“XXX”，
所以姓名与密码的绑定为

姓名	<input type="text" v-model="student.username"> <br>
密码	<input type="password" v-model="student.password"> <br>

由于男和女是一对的，只能选其一，所以我们将其绑定在同一个元素

性别	
<label><input type="radio" value="男" v-model="student.gender"> 男</label>
<label><input type="radio" value="女" v-model="student.gender"> 女</label><br>

爱好这一栏是可以多选的，故而要在vuejs里面初始化一个空数组，然后再去做绑定。

data:{
				student:{
					hobbies:[]
				}
      },

爱好
<label><input type="checkbox" value="篮球" v-model="student.hobbies">篮球</label>
<label><input type="checkbox" value="足球" v-model="student.hobbies">足球</label>
<label><input type="checkbox" value="阅读" v-model="student.hobbies">阅读</label>

剩下的地址和介绍的绑定方式，就是添加指令v-model=“XXX”。
完了之后，vue中data的student与form中的student建立了双向联系，vue中data的值就会流入到form中，form中值的改变也会流入到data里。

完整代码

<!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">
		<form @submit.prevent="handler">
			姓名<input type="text" v-model="student.username"><br>	
			密码<input type="text" v-model="student.password"><br>	
			性别
			<label ><input type="radio" value="男" v-model="student.gender">男</label>
			<label ><input type="radio" value="女" v-model="student.gender">女</label>
			<br>
			爱好
			<label><input type="checkbox" value="篮球"v-model="student.hobbies">篮球</label>
			<label><input type="checkbox" value="音乐"v-model="student.hobbies">音乐</label>
			<br>
			地址
			<select v-model="student.address">
				<option value="上海">上海</option>
				<option value="江苏">江苏</option>
				<option value="浙江">浙江</option>
			</select>
			<br>
			介绍
			<textarea cols="30" rows="10" v-model="student.description"></textarea>
			<br>
			<input type="submit" value="提交">
		</form>
	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				student:{
					hobbies:[]
				}
			},
			methods:{
				handler(){
					alert(JSON.stringify(this.student));
				}
			}
		})
	</script>
</body>
</html>

無事咕咕

关注

0
点赞
踩
3

收藏

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

用HTML写一个表单<div id="app"> <form action=" "> 姓名<input type="text"><br> 密码<input type="text"><br> 性别 <label ><input type="radio" value="男"&gt...
复制链接

扫一扫