Vue指令：v-model指令案例_v-model实现性别案例‘’-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48139742/article/details/125558621

Vue表单元素中使用v-model指令，实现双向数据绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			
		</style>
	</head>
	<body>
		
		<div id="app">
			<h1 >问卷调查</h1>
			<p>
				姓名：<input type="text" v-model="name"/>
			</p>
			<p>
				性别：<input type="radio"  name="sex" value="男" v-model="sex" />男
					<input type="radio"  name="sex" value="女" v-model="sex" />女
			</p>
			<p>
				爱好：
					 <input type="checkbox" name="hobby" value="唱歌" v-model="hobby"/>唱歌
					 <input type="checkbox" name="hobby" value="跳舞" v-model="hobby"/>跳舞
					 <input type="checkbox" name="hobby" value="打篮球" v-model="hobby"/>打篮球
					 <input type="checkbox" name="hobby" value="踢足球" v-model="hobby"/>踢足球
					 <input type="checkbox" name="hobby" value="游泳" v-model="hobby"/>游泳
			</p>
			<p>
				家庭地址：<select name="address" id="" v-model="address">
							<option>--请选择--</option>
							<option value="南京">南京</option>
							<option value="北京">北京</option>
							<option value="天津">天津</option>
							<option value="上海">上海</option>
							<option value="杭州">杭州</option>
						</select>
						
			</p>

		<p>信息为：姓名：{{name}},  性别：{{sex}} ,  爱好：{{hobby}},  家庭住址：{{address}}</p>
		
		<button type="submit" @click="yes">确认提交</button>
		
		</div>
		
		<script>
			var vue = new Vue({
				el:'#app',
				data:{
					name:"",
					sex:"男",
					hobby:[],
					address:"南京"
				},
				methods:{
					yes(){
						let obj = {
							name: this.name,
							sex: this.sex,
							hobby: this.hobby,
							address: this.address
						}
						console.log(obj)
					},
				}
			})
			
			
		</script>
		
	</body>
</html>