5.1.4　表單控件綁定

在前端Web應(yīng)用中，經(jīng)常會(huì)使用表單向服務(wù)端提交一些數(shù)據(jù)，而通常也會(huì)在表單項(xiàng)中綁定一些（如input、change等）事件對(duì)用戶輸入的數(shù)據(jù)進(jìn)行校驗(yàn)、更新等操作。在Vue.js中可以使用v-model指令同步用戶輸入的數(shù)據(jù)到Vue實(shí)例的data屬性中，同時(shí)會(huì)對(duì)text、radio、checkbox、select等原生表單組件提供一些語(yǔ)法支持，以使表單操作更加容易。下面將通過(guò)示例來(lái)看看如何使用v-model更新表單組件（在雙向綁定中簡(jiǎn)單介紹過(guò)，這里進(jìn)行詳細(xì)說(shuō)明）。

1．text

text：設(shè)置文本框v-model為message。代碼如下：

運(yùn)行的效果如圖5-5所示。

提示：當(dāng)用戶操作文本框時(shí)，vm.message會(huì)自動(dòng)更新為用戶輸入的值，同時(shí)文本框中的內(nèi)容也會(huì)隨著改變。

2．checkbox

checkbox：復(fù)選框checkbox在表單中會(huì)經(jīng)常使用。下面我們來(lái)看看單個(gè)checkbox如何使用v-model。代碼如下：

運(yùn)行的效果如圖5-6所示。

提示：當(dāng)用戶勾選了復(fù)選框后，vm.checked=true（否則，vm.checked=false），label中的值也會(huì)隨著改變。

3．radio

radio：當(dāng)單選按鈕被選中時(shí)，v-model中的變量值會(huì)被賦值為對(duì)應(yīng)的value值。代碼如下：

運(yùn)行的效果如圖5-7所示。

4．select

select：因?yàn)閟elect控件分為單選和多選，所以v-model在select控件的單選和多選上會(huì)有不同的表現(xiàn)。代碼如下：

運(yùn)行的效果如圖5-8所示。

提示：當(dāng)被選中的option有value屬性時(shí)，vm.selected為對(duì)應(yīng)option的value值，否則為對(duì)應(yīng)的text值。