vue.js為開發(fā)者提供了很多便利的指令，其中v-model用于表單的數(shù)據(jù)綁定很常見，
下面是最常見的例子
<div id='myApp'>
<input type="text" v-model="msg"><br>
{{msg}}
</div>
js里data初始化數(shù)據(jù)
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#myApp",
data() {
return {
msg:'hello'
}
},
瀏覽器渲染：
上面可知，v-model對應(yīng)的數(shù)據(jù)為input的value屬性
但是如果是checkbox，會有一點問題
<div id='myApp'>
<input type="checkbox" v-model="msg"><br>
{{msg}}
</div>
沒有給checkbox設(shè)置value屬性
js中data為''：
new Vue({
el: "#myApp",
data() {
return {
msg:''
}
},
瀏覽器渲染：
勾選為true，取消勾選為false
且data中msg如果初始化為true，則checkbox默認選中
到這里讓人會有在checkbox里，v-model對應(yīng)的值為true或false，似乎和checked屬性有關(guān)
是不是這樣呢，我們再來看一個例子：
<div id='myApp'>
<input type="checkbox" v-model="msg" value="angular">angular<br>
<input type="checkbox" v-model="msg" value="react">react<br>
<input type="checkbox" v-model="msg" value="vue">vue<br>
{{msg}}
</div>
我們設(shè)置三個checkbox，分別設(shè)置value屬性
js中依然
new Vue({
el: "#myApp",
data() {
return {
msg:''
}
},
瀏覽器:
可以看到有了value屬性，v-model 對應(yīng)的msg 依然是true或false；
那么之前的猜想難道是正確的嗎？
我們來改一點代碼，通常v-model對應(yīng)的都是字符串，這次我們初始化為空數(shù)組[]
data() {
return {
msg:[]
}
},
其他的不變，依然是上面三個checkbox
神奇的一幕出來了
瀏覽器中：
可以看到，選中誰，誰的value就會添加到數(shù)組里，
且數(shù)據(jù)是雙向綁定的，所以，當(dāng)我們初始化數(shù)據(jù)的數(shù)組里賦予上面的value值時，所對應(yīng)的checkbox便會默認選中
所以可以看到，checkbox里v-model對應(yīng)的值依然是value，但是之前為什么是true或false？
我自己在網(wǎng)上找了很久，沒有發(fā)現(xiàn)一個特別清楚的解釋，所以在這里發(fā)表一下自己的理解：
1.checkbox和普通input一樣，點擊勾選其實就是輸入value,而輸入value會改變checked屬性,所以會選中
當(dāng)v-model對應(yīng)“字符串”時會解析“字符串”為布爾值，v-model對應(yīng)有值或是true，checkbox都會選中。
2.當(dāng)v-model對應(yīng)“數(shù)組”時有勾表示已選中，相當(dāng)于賦值給，相當(dāng)于有value，v-model對應(yīng)value,
沒有value屬性時，點勾相當(dāng)于將('null')賦值給value——>v-model('null'為字符串),
有value屬性時，點勾相當(dāng)于將(value)賦值給value——>v-model，
注意數(shù)據(jù)是雙向綁定的，所以數(shù)組里的值對應(yīng)著checkbox的value——>v-model。
3.處理表單，v-model一般都是對應(yīng)字符串，所以處理checkbox的v-model，善用對應(yīng)布爾值控制勾選。
