挑战百日学习计划(小程序开发)-第8天(Vue表单)

打卡：第八天 .每天进步1%，热爱学习不能自拔！虽然知识点不是很高深，但是先稳固自己的知识。循环渐进.争取在100天内能实现技术的质变！最终能实现（小程序开发：www.zkelm.com）的目标

Vue表单的理解：

<div id="app">
			<form action="#" method="get">
				<textarea v-model="Mytextarea" placeholder="请输入内容"></textarea>
				<p>{{Mytextarea}}</p>
				<select name="myselect" v-model="myselect">
					<option value="www.zkelm.com">赚客联盟</option>
					<option value="www.baidu.com">百度一下</option>
					<option value="www.163.com">网易163</option>
				</select>
				<p>您的Select选择：{{myselect}}</p>
				<input type="checkbox" id="checkbox" v-model="checked">
				<label for="checkbox">{{checked}}</label>
				<p>------多选择-------------</p>
				<input type="checkbox" id="zkelm" value="zkelm.com" v-model="checkedNames">
				<label for="zkelm">zkelm.com</label><br>
				<input type="checkbox" id="baidu" value="baidu.com" v-model="checkedNames">
				<label for="baidu">baidu.com</label><br>
				<input type="checkbox" value="163.com" id="163" v-model="checkedNames">
				<label for="163" >163.com</label>
				<p>输出结果：{{checkedNames}}</p>
				<p>------radio单选框--------</p>
				<input type="radio"  id="radio_zkelm" value="zkelm" v-model="mradio"/>
				<label for="radio_zkelm">zkelm</label>
				<input type="radio"  id="radio_baidu" value="baidu" v-model="mradio"/>
				<label for="radio_baidu">baidu</label>
				<p>radio输出结果：{{mradio}}</p>
				
				</form>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					Mytextarea:"挑战百日学习计划！",
					myselect:"www.zkelm.com",
					checked:true,
					checkedNames:[],
					mradio:"zkelm"
				}
			})
		</script>

运行结果：

表单关键的就是双向绑定：v-model
其中 select 绑定的是 数组