v-model的實質(zhì)
- v-model的實質(zhì)是利用表單元素的屬性和事件厘线。
view--->data //從頁面中更改的數(shù)據(jù)吻贿，利用該元素觸發(fā)的事件拳喻，處理數(shù)據(jù)層中的數(shù)據(jù)。
data--->view //數(shù)據(jù)層的數(shù)據(jù)發(fā)生改變行冰，更改該元素對應(yīng)的屬性被碗，改變頁面中的數(shù)據(jù)。
或許你應(yīng)該去了解一下html元素的dom對象（js對象）
v-model在不同類型的表單元素中的效果
text
- 對于
<input type='text'>福压，它的value屬性控制頁面上輸入框的文本展示掏秩，輸入時觸發(fā)input事件。所以v-model就利用這些特性實現(xiàn)雙向數(shù)據(jù)綁定荆姆。
接下來的說明蒙幻，input表示對應(yīng)元素的dom對象，data代表數(shù)據(jù)層中的data對象胆筒。
<input v-model="message" placeholder="edit me">// 顯示：hhj
<p>Message is: {{ message }}</p> //hhj
...(data)
{message : 'hhj'}
- 初始時邮破，v-model把data.message的值賦給input.value，所以輸入框的值為hhj仆救。
- 當(dāng)輸入'hc'時抒和，觸發(fā)input事件，v-model把input.value的值賦給data.message彤蔽，所以頁面上顯示'hc'摧莽。
checkbox
- 對于
<input type='checkbox '>，它的checked屬性控制著頁面上的勾選框是否勾選顿痪，點擊勾選框時觸發(fā)change事件镊辕。所以v-model就利用這些特性實現(xiàn)雙向數(shù)據(jù)綁定，但是要注意對于單個復(fù)選框和多個復(fù)選框?qū)崿F(xiàn)的方式不一樣蚁袭。
單個復(fù)選框
<input type="checkbox" id="checkbox" v-model="checked"> // 未勾選
<label for="checkbox">{{ checked }}</label> //false
...(data)
｛checked：false}
- 初始時偿渡，v-model先會判斷data.checked的類型瓶竭，如果是Boolean，說明是單個復(fù)選框模式。然后把data.checked的值賦給input.checked炼邀，所以呈現(xiàn)為未勾選狀態(tài)趁仙。
- 當(dāng)點擊勾選框時，觸發(fā)change事件，并且
input.checked=!input.checked厦章，v-model把input.checked的值賦給data.checked，所以頁面上顯示true照藻。
多個復(fù)選框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> //勾選
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">// 未勾選
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">// 未勾選
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>// Checked names: [ "Jack" ]
...(data)
{
checkedNames: ['Jack']
}
- 初始時袜啃，v-model先會判斷data.checked的類型，如果是Array幸缕，說明是多個復(fù)選框模式群发。然后拿data.checked數(shù)組中的值，與復(fù)選框的value屬性比較发乔，如果數(shù)組中有一樣的值熟妓，則把該復(fù)選框的checked值賦予true，所以id為jack的復(fù)選框呈現(xiàn)為勾選狀態(tài)栏尚。
- 當(dāng)點擊勾選框時起愈，觸發(fā)change事件，并且對應(yīng)的復(fù)選框
input.checked=!input.checked译仗，v-model把input.checked的值給丟進(jìn)data.checkedNames抬虽，所以頁面上出現(xiàn)勾選的值。
<label for="id">text</label> 用來實現(xiàn)標(biāo)簽與<input/>的綁定纵菌，對于不同類型的input有不同的效果阐污，例如：type=checkbox時，點擊標(biāo)簽名與點擊復(fù)選框一樣咱圆。for綁定<input/>的id笛辟。
