master

分支 (1)

管理

管理

master

vue2-20240808
/
06 表单.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app6">
			<form action="#" method="get">
				<!-- 视图 view   -->
				<!-- v-model 双向数据绑定，数据的改变视图，视图的改变也能够影响数据 -->
				<input type="text" v-model.lazy="user.username" placeholder="请输入用户名"/> {{user.username}}
				<input type="password" v-model="user.password" placeholder="请输入密码"/>
				<input v-model.number="user.age" placeholder="请输入年龄"  type="number"/>{{user.age}}
				<br/>
				<input v-model.trim="msg">{{msg}}
				<input type="radio" v-model="user.gender" value="male"/>男
				<input type="radio" v-model="user.gender" value="female"/>女
				{{user.gender}}<br/>
				<input type="checkbox" v-model="user.hobbies" value="basketball"/>篮球
				<input type="checkbox" v-model="user.hobbies" value="football"/>足球
				<input type="checkbox" v-model="user.hobbies" value="pingpang"/>乒乓
				{{user.hobbies}}<br/>
				<select v-model="user.city">
					<option value="bj">北京</option>
					<option value="sh">上海</option>
				</select>{{user.city}}<br/>
				<textarea v-model="user.info"></textarea>
				{{user.info}}
				<button>提交</button>
			</form>
		</div>
	</body>
	<script>
	var app=new Vue({
			el:"#app6",
			data:{//data 数据
			     msg:"",
				user:{
					username:"zhangsan",
					password:"",
					gender:"",
					hobbies:[],
					info:"",
					age:0,
					city:""
					}
			}
		})
	</script>
</html>