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雙向綁定。