vue表单中radio，checkbox数据绑定问题

       在vue的表单数据绑定时会遇到许多的问题，下面我讲述一下我在编写代码时遇到的一些问题

        1.使用radio的时候，进行了数据绑定后需要给radio添加value值，否则的话会出现绑定的数据值为null

请看下面一个例子：

性别: 
			男<input type="radio" name="sex" v-model="sex" > 
			女<input type="radio" name="sex" v-model="sex" ><br><br>

随便选中一个

 

现在查看vue的data数据：

添加value可以解决此问题，并且可以在data中设置sex的默认值，radio就会有默认选中

男<input type="radio" name="sex" v-model="sex" value="male"> 
女<input type="radio" name="sex" v-model="sex" value="female">

        

        2.对于checkbox，vue默认保存的是checkbox的checked的值，所以跟radio同理要设置value的值，这样vue.data就会保存checkbox的value值，并且要利用数组来保存checkbox的value值

new Vue({
		el: "#root",
		data: {
			hobby:[],
		}
	})

学习<input type="checkbox" v-model="hobby" value="study">
游戏<input type="checkbox" v-model="hobby" value="game">
烫头<input type="checkbox" v-model="hobby" value="tang">

这样hobby存放的就是checkbox的value

       在我们要把data的数据发送给后端时，我们可以直接使用JSON发送vm._data，但是我们也可以把需要发送的数据放在一个对象中，比如把用户的数据统一放在userinfo这个对象中，这样就可以直接JSON.stringify(vm.userInfo)就可以了，但是在就行数据绑定的时候就需要添加userinfo.变量，两者皆可

        同时我们可以把发送数据的行为直接添加在form标签中，不用给提交按扭绑定样式，这样的方法有一个好处就是可以阻止提交时页面刷新的默认样式，下面展示一下代码示例

<form @submit.prevent="demo"></form>

new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				} 
			}
		})