v-model
表單控件在實(shí)際開(kāi)發(fā)中是非常常見(jiàn)的。特別是對(duì)于用戶信息的提交，需要大量的表單。
Vue中使用v-model指令來(lái)實(shí)現(xiàn)表單元素和數(shù)據(jù)的雙向綁定。
案例：
當(dāng)我們?cè)谳斎肟蜉斎雰?nèi)容時(shí)
因?yàn)閕nput中的v-model綁定了message，所以會(huì)實(shí)時(shí)將輸入的內(nèi)容傳遞給message，message發(fā)生改變。
當(dāng)message發(fā)生改變時(shí)，因?yàn)樯厦嫖覀兪褂肕ustache語(yǔ)法，將message的值插入到DOM中，所以DOM會(huì)發(fā)生響應(yīng)的改變。
所以，通過(guò)v-model實(shí)現(xiàn)了雙向的綁定。
當(dāng)然，我們也可以將v-model用于textarea元素
v-model原理
v-model其實(shí)是一個(gè)語(yǔ)法糖，它的背后本質(zhì)上是包含兩個(gè)操作：
1.v-bind綁定一個(gè)value屬性
2.v-on指令給當(dāng)前元素綁定input事件
也就是說(shuō)下面的代碼：等同于下面的代碼：
<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">
v-model：radio
當(dāng)存在多個(gè)單選框時(shí)
v-model：checkbox
復(fù)選框分為兩種情況：?jiǎn)蝹€(gè)勾選框和多個(gè)勾選框
單個(gè)勾選框：
v-model即為布爾值。
此時(shí)input的value并不影響v-model的值。
多個(gè)復(fù)選框：
當(dāng)是多個(gè)復(fù)選框時(shí)，因?yàn)榭梢赃x中多個(gè)，所以對(duì)應(yīng)的data中屬性是一個(gè)數(shù)組。
當(dāng)選中某一個(gè)時(shí)，就會(huì)將input的value添加到數(shù)組中。
v-model：select
和checkbox一樣，select也分單選和多選兩種情況。
單選：只能選中一個(gè)值。
v-model綁定的是一個(gè)值。
當(dāng)我們選中option中的一個(gè)時(shí)，會(huì)將它對(duì)應(yīng)的value賦值到mySelect中
多選：可以選中多個(gè)值。
v-model綁定的是一個(gè)數(shù)組。
修飾符
lazy修飾符：
默認(rèn)情況下，v-model默認(rèn)是在input事件中同步輸入框的數(shù)據(jù)的。
也就是說(shuō)，一旦有數(shù)據(jù)發(fā)生改變對(duì)應(yīng)的data中的數(shù)據(jù)就會(huì)自動(dòng)發(fā)生改變。
lazy修飾符可以讓數(shù)據(jù)在失去焦點(diǎn)或者回車時(shí)才會(huì)更新：
number修飾符：
默認(rèn)情況下，在輸入框中無(wú)論我們輸入的是字母還是數(shù)字，都會(huì)被當(dāng)做字符串類型進(jìn)行處理。
但是如果我們希望處理的是數(shù)字類型，那么最好直接將內(nèi)容當(dāng)做數(shù)字處理。
number修飾符可以讓在輸入框中輸入的內(nèi)容自動(dòng)轉(zhuǎn)成數(shù)字類型：
trim修飾符：
如果輸入的內(nèi)容首尾有很多空格，通常我們希望將其去除
trim修飾符可以過(guò)濾內(nèi)容左右兩邊的空格
