【Vue 给表单绑定数据】

最新推荐文章于 2024-01-19 20:19:06 发布

Syugam

最新推荐文章于 2024-01-19 20:19:06 发布

阅读量595

点赞数 1

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

本文链接：https://blog.csdn.net/m0_54838595/article/details/127026303

版权

Vue_base 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写目录标题

Vue 表单绑定数据

Vue 表单绑定数据

代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>简单给表单绑定数据并输出</title>
		<script type="text/javascript" src="./vue.js"></script>
	</head>
	<body>
	    <div id="root">
	      <form @submit.prevent="func">
	        账号:
	        <input type="text" v-model.trim="userInfo.account"><br><br>
	        密码:
	        <input type="password" v-model.trim="userInfo.password"><br><br>
	        年龄:
	        <input type="number" v-model.number="userInfo.age"><br><br>
	        性别：
	        男<input type="radio" name="sex" value="male" v-model="userInfo.sex">
	        女<input type="radio" name="sex" value="female" v-model="userInfo.sex"><br><br>
	        爱好：
	        唱<input type="checkbox" value="sing" v-model="userInfo.hobbies">
	        跳<input type="checkbox" value="dance" v-model="userInfo.hobbies">
	        rap<input type="checkbox" value="rap" v-model="userInfo.hobbies">
	        篮球<input type="checkbox" value="basketball" v-model="userInfo.hobbies"><br><br>
	        地址：
	        <select v-model="userInfo.address">
	          <option value="">请选择</option>
	          <option value="bj">北京</option>
	          <option value="sh">上海</option>
	          <option value="sz">深圳</option>
	          <option value="hz">杭州</option>
	        </select><br><br>
	        其他：
	        <textarea cols="30" rows="10" v-model.lazy="userInfo.other"></textarea><br><br>
	        <input type="checkbox" v-model="userInfo.agree">
	        同意<a href="http://www.baidu.com">《用户协议》</a><br><br>
	        <input type="submit" value="提交">
	      </form>
	    </div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
		        userInfo: {
		          account: '',
		          password: '',
		          age: 0,
		          sex: 'male',
		          hobbies: [],
		          address: '',
		          other: '',
		          agree: false
		        }
			},
		      methods: {
		        func() {
		          if(this.userInfo.agree) {
		          	// 看起来更直观
		            console.log(JSON.stringify(this.userInfo));
		          }
		          else {
		            alert('请勾选!')
		          }
		       }
		    }
		})
	</script>
</html>