vue基础（v-model与复选框）

vue基础（v-model与复选框）

一、复选框单独使用

复选框也分单独使用和组合使用，不过，与单选按钮不同，复选框单独使用时，也是用v-model来绑定一个布尔值，例如：

<div id="app13">
			<input type="checkbox" v-model="checked" id="ch" />
			<label for="ch">复选框的状态{{checked}}</label>
		</div>
		<script type="text/javascript">
			var app12 = new Vue({
				el:'#app13',
				data:{
					checked:true  //这里的v-model对应布尔值
					//checked:'' 这里的v-model对应字符串
				}
			})
		</script>

二、复选框组合使用

复选框组合使用时，也是v-model与value一起，多个勾选都绑定到同一数组类型的数据，value的值在数组当中，就会选中这一项。这一过程是双向的，在勾选时，value的值也会自动push到这个数组中，示例代码如下：

<div id="app14">
			<input type="checkbox" v-model="picked" id="html1" value="html"/>
			<label for="html1">html</label>
			<br>
			<input type="checkbox" v-model="picked" id="css1" value="css">
			<label for="css1">css</label>
			<br>
			<input type="checkbox" v-model="picked" id="js1" value="js">
			<label for="js1">js</label>
			<br>
			
			<p>你的选择是{{picked}}</p>
		</div>
		<script type="text/javascript">
			var app14 = new Vue({
				el:'#app14',
				data:{
					picked:['css']
				}
			})
		</script>

这里的v-model 绑定一个数组，当选中当前项时，该项的value值会自动进入数组中，未选中时会自动从数组中删除。
初始化时，picked数组中初始化了选择了css：

选择html后：

总结：

1. 当v-model对应字符串的时候(比如：picked:’ '),会解析字符串为布尔值，v-model对应有值或者是true，checkbox都会被选中。
2. 也就是说当多个复选框组合使用时，如果picked:’’->绑定字符串，一旦checked有值，或者为true，全部的复选框都会被选中；
   例子如下：

	<div id="app14">
			<input type="checkbox" v-model="picked" id="html1" value="html"/>
			<label for="html1">html</label>
			<br>
			<input type="checkbox" v-model="picked" id="css1" value="css">
			<label for="css1">css</label>
			<br>
			<input type="checkbox" v-model="picked" id="js1" value="js">
			<label for="js1">js</label>
			<br>
			
			<p>你的选择是{{picked}}</p>
		</div>
		<script type="text/javascript">
			var app14 = new Vue({
				el:'#app14',
				data:{
					// picked:['css']
					picked:'a'
				}
			})
		</script>

• 当v-model绑定“数组”时有勾表示已选中，相当于赋值给，相当于有value，v-model对应value。

• 没有value属性时，点勾相当于将(‘null’)赋值给value,此时v-model绑定的变量的值也是’null’。

• 有value属性时，点勾相当于将(value)赋值给value，此时v-model绑定的变量的值=该value的值。

• 注意数据是双向绑定的，所以数组里的值对应着checkbox的value与v-model双向绑定。