首先了解表单空间常见的那几样：text框，password框在注册登录是用的比较常见的，以及还有什么checkbox框，可以是登录注册界面当中的 "记住我" 或 "自动登录" 这些，以及常见的一些兴趣爱好和服务进行单选多选，那么这篇内容讲表单控件的绑定，一如既往的先看看简单的内容：

<div id="app">
	<p><input type="text" v-model="mytext"/> 	这是text框</p>
	<p><input type="password" v-model="mytext"/> 	这是password框</p>
	<p><textarea type="password" v-model="mytext"></textarea> 	这是textarea框</p>
</div>

         以上的一些在之前我们的一些小案例中已经有使用过了，所以不过多讲解，其实就是 v-model的一个加强使用，如可以获取到input框中的数据；那么做兴趣爱好服务等这类多类选项呢？

多选框 - checkbox

 基本思路：

        遍历input框，用v-model绑定数组，将被我们选择的值添加到数组中，通过点击提交，将对应的数据提交出去，那么这里我们只能做模拟，将数据打印出来。

<div id="app">
	<p>选择你感兴趣的?(可多选)</p>
	<p><input type="checkbox" v-model= "checkGroup" value="Vue" />Vue</p>
	<p><input type="checkbox" v-model= "checkGroup" value="React" />React</p>
	<p><input type="checkbox" v-model= "checkGroup" value="jQuery" />jQuery</p>
	<p><input type="submit" @click="handleSubmit"/></p>
	<hr >
	<p>后台显示选择打印：</p>
	<p v-for="item in checkGroup" :key="item">{{item}}</p>
</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			checkGroup:[], //存放选择数据
		},
		methods:{
			handleSubmit(){
				if(this.checkGroup.length != 0){
					alert("提交成功");
					console.log("提交数据："+this.checkGroup)
				}else{
					alert("请选择...")
				}
			}
		}
	})
</script>

        以上的这种场景其实是挺常见，当我们进入某个社区时会要你选择自己感兴趣的，以及进入读书等应用会要你选择自己喜欢的，如：文学，小说 ，名著等这些选项供你选择；

        那么接下来讲在登录中见到的这种状态，如是否勾选了自动登录、记住账户名等这类操作。

自动登录 / 记住账户名

基本思路：

        当未选择 "记住" 时，点击登录时，将用户信息(userInfo)数据打印到控制台上，当选择 "记住" 时，点击登录时，将用户信息存放到本地，这里将其存放在sessionStroage中，可以存放在locationStroage中；

<div id="app">
	<p>账户：<input type="text" v-model="userInfo.username"/></p>
	<p>密码：<input type="password" v-model="userInfo.password"/></p>
	<p>记住：<input type="checkbox" v-model="userInfo.myState"/></p>
	<p><input type="submit" value="登录" @click="handleLogin"/></p>
</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			// 存放用户信息
			userInfo:{
				username:'', // 账户
				password:'', // 密码
				myState:false // 状态
			}
		},
		methods:{
			handleLogin(){
				if(this.userInfo.myState){ // 选择记住
					sessionStorage.setItem("userInfo","用户名: "+this.userInfo.username+"，密码: "+this.userInfo.password+"，状态: "+this.userInfo.myState) // 进行本地保存
				}else{ 
					console.log("userInfo","用户名: "+this.userInfo.username+"，密码: "+this.userInfo.password+"，状态: "+this.userInfo.myState)
				}
				
			}
		}
	})
</script>

 以上就是通过这个表单控件的方式绑定来完成 "记住功能" ；接下来讲这个单选功能；

单选 - radio

单选也是在表单中非常常见的，上学做题都做了很多单选题，现在我们来进行一个单选的例子；

 基本思路：

        data中定义favor来存放选择的数据，这里时单选所以不适用数组，选项绑定favor，结合v-model的使用；可以感受一下用vue来做和你用js来做的区别；

<div id="app">
	<p>(单选)选择你最喜欢一项：</p>
	<p><input type="radio" v-model="favor" value="Vue"> Vue</p>
	<p><input type="radio" v-model="favor" value="React"> React</p>
	<p><input type="radio" v-model="favor" value="jQuery"> jQuery</p>
	<p><input type="submit" @click="handleSubmit()"></p>
</div>
<script type="text/javascript">
	new Vue({
		el:'#app',
		data:{
			favor:''
		},
		methods:{
			handleSubmit(){
				console.log("提交：" + this.favor);
			}
		}
	})
</script>

        以上讲到的就是这个表单控件绑定的一些应用，下一篇内容就开始进行一个简单的应用，我们循序渐进，尽可能用最简单的方式懂得，到这就告一段落，感谢大家的支持！