2.5　表單輸入綁定

2.5.1　雙向綁定

MVVM模式最重要的一個特性就是雙向綁定，而Vue作為一個MVVM框架，也實現了數據的雙向綁定。在Vue中使用內置的v-model指令完成數據在View與Model間的雙向綁定。

v-model會忽略所有表單元素的value、checked、selected attribute的初始值而將Vue實例的數據作為數據來源，因此應該通過JavaScript在組件的data選項中聲明初始值。

2.5.2　v-model基本用法

當v-model使用在不同的表單元素上時，保存值的類型也是不同的，常見的表單元素數據綁定操作如下。

1．文本輸入框

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.41所示。

2．文本域

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.42所示。

3．復選框

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.43所示。

4．單選按鈕

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.44所示。

5．下拉選擇框

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.45所示。

2.5.3　修飾符

對于v-model指令，有3種常用的修飾符。

·　lazy

·　number

·　trim

1．lazy修飾符

在輸入框中，v-model默認為同步數據，使用lazy修飾符后會轉變為在change事件中同步，即當輸入框失去焦點時數據才會更新。

index.html文件代碼如下：

在瀏覽器中運行，當輸入內容時不會同步更新，如圖2.46所示。當輸入框失去焦點時，數據才會被更新，如圖2.47所示。

2．number修飾符

輸入框默認輸入的值為String類型，使用number修飾符可以將輸入的值轉化為Number類型，該修飾符經常使用在數字輸入框中。

index.html文件代碼如下：

在瀏覽器中運行，輸入框的默認值為String類型，如圖2.48所示。當輸入數字時，值的類型會被轉化為Number類型，如圖2.49所示。

3．trim修飾符

如果要自動過濾用戶輸入內容的首尾空格，可以給v-model添加trim修飾符。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.50所示。