尚硅谷的vue旅程11-vue中表单数据的自动收集(v-model)

简介

一.使用v-model(双向绑定数据)自动收集数据，数据收集到vue中的data里面
	radio
	checkbox
	text/textarea
	select

二.
	1.radio单选框中 设置v-model绑定的默认值时，要填写相应value属性值
	2.checkbox多选框中，	设置v-model绑定的默认值时，要填写相应value属性值,并用数组包起来
	3.多选框的选项，由v-for列表渲染，以数组包含对象的形式来储存 

代码示例

<div id="demo">
	<form action="/xxx" @submit.prevent="handleSubmit">
		<label for="userName">用户名:</label>
		<input type="text" id="userName" v-model="username"><br>
		
		<label for="pwd">密码:</label>
		<input type="password" id="pwd" v-model="password">
		<br>
		
		<!-- 1.radio单选中 设置v-model绑定的默认值时，要填写相应value属性值 -->
		性别:<input type="radio" id="female" value="女" v-model="sex">
		<label for="female">女</label>
		<input type="radio" id="male" value="男" v-model="sex">
		<label for="male">男</label>
		<br>
		
		<!-- 2.checkbox多选框中，设置v-model绑定的默认值时，要填写相应value属性值,并用数组包起来 -->
		<span>爱好:</span>
		    <input type="checkbox" id="basket" value="basket" v-model="likes">
			<label for="basket">篮球</label>
			<input type="checkbox" id="foot" value="foot" v-model="likes">
			<label for="foot">足球</label>
			<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
			<label for="pingpang">乒乓</label>
		<br>
		
		<!-- 3.多选框的选项，由v-for列表渲染，以数组包含对象的形式来储存 -->
		<!--  这只多选框的默认选项，应该子啊select标签中设置 -->
		<span>城市:</span>
		<select v-model="cityId">
			<option value="">未选择</option>
			<option :value="city.id" v-for="(city,index) in citys" :key="index">{{city.name}}</option>
		</select><br>
		
		<label for="txt">介绍:</label>
		<textarea id="txt" rows="10" cols="19" v-model="desc"></textarea><br><br>
			
		<input type="submit" value="注册">
	</form> 
</div>


<script src="../js/vue.js"></script>
<script>
	new Vue({
		el:"#demo",
		data:{
			username:"",
			password:"",
			sex:"女" ,//“女”来自value属性值
			likes:["basket"],
			citys:[{name:"上海",id: 1},{name:"广东",id: 2},{name:"西安",id: 3}],
			cityId: "1",
			desc:"请在这里输入你想要的信息"
		
		},
		methods:{
			handleSubmit(){//使用prevent停止游览器默认行为，实现手动梳处理数据，进而可以将数据通过ajax发送
				console.log(this.username + " " + this.password + " " + this.sex + " "+ this.likes + " " + this.cityId + " "+ this.desc);
			}
		}
	})
</script>