v-model结合checkbox(多选)使用

checkbox可以结合v-model做单选框，也可以多选框。

checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。

        <div id="app">
			<label for="isagree">
				<input type="checkbox" id="isagree" value="" v-model="agree"/>同意协议
			</label>
			<button type="button" :disabled="!agree">下一步</button>
		</div>
		
		
		<script src="vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:"#app",
				data(){
					return{
						agree:false
					}
				}
			})
		</script>

checkbox结合v-model实现多选框，定义数组对象hobbies，用于存放爱好，将hobbies与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，hobbies就添加一个对象。

        <div id="app">
			<input type="checkbox" value="篮球" v-model="sports">篮球
			<input type="checkbox" value="排球" v-model="sports">排球
			<input type="checkbox" value="足球" v-model="sports">足球
			<input type="checkbox" value="羽毛球" v-model="sports">羽毛球
			<h2>您的爱好是:{{sports}}</h2>
		</div>

		<script src="vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:"#app",
				data(){
					return{
						sports:[]
					}
				}
			})
		</script>

多选值动态值的绑定

        <div id="app">
			<label v-for="(item,index) in sports" :for="item">
				<input type="checkbox" :id="item" :value="item" v-model="sport">{{item}}
			</label>
			<h2>您的爱好是{{sport}}</h2>
		</div>
		
		<script src="vue.js"></script>
		<script type="text/javascript">
			const vm = new Vue({
				el:"#app",
				data(){
					return{
						sport:[],
						sports:["篮球","足球","排球","羽毛球"]
					}
				}
			})
		</script>