vue.js从入门到深入再到随心而用——

本文链接：https://blog.csdn.net/qq_42147171/article/details/104933299

v-model的学习

1.效果
2.代码
3. 要点

1.效果

利用v-model实现双向绑定，在页面上修改值也可以修改定义在vue数据中的值

2.代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
	</head>

	<body >
		<form id="example">
			姓名：<input type="text" v-model="data.name" placeholder=""/><br/> 性别：
			<input type="radio" id="man" value="One" v-model="data.sex"/>
			<label for="man">男</label>
			<input type="radio" id="male" value="Tow" v-model="data.sex"/>
			<label for="male">女</label>
			<br/> 兴趣:
			<input type="checkbox" id="book" value="book" v-model="data.interest" />
			<label for="book">阅读</label>
			<input type="checkbox" id="swin" value="swin" v-model="data.interest" />
			<label for="swin">游泳</label>
			<input type="checkbox" id="game" value="game" v-model="data.interest" />
			<label for="game">游戏</label>
			<input type="checkbox" id="song" value="song" v-model="data.interest" />
			<label for="song">唱歌</label><br/>
			<select  v-model="data.identity">
				<option value="teacher" selected>教室</option>
				<option value="doctor">医生</option>
				<option value="lawyer">律师</option>
			</select>
		</form>
		
			<script type="text/javascript ">
				var vm=new Vue({
					el:'#example',
					data:{
						data:{
							name:'sssssss',
							sex:" ",
							interest:[],
							identity:''
						}
					}
				})
		</script>
	</body>
</html>