表單資料的雙向綁定

• 雙向綁定是Vue中處理使用者互動的一種方式，文字輸入框、多行文本輸入區域、單選按鈕與多選框等，都可以進行資料的雙向綁定。

文字輸入框

• 文字輸入框的資料綁定之前有使用過，使用Vue的v-model指令即可直接設定，當輸入框中數入的文字發生變化時，段落中的文字也會同步產生變化。

多行文本輸入區域

• 多行文本可使用textarea標籤來實現，textarea方便定義一塊區域用來顯示和輸入多行文本，文字可換行，並且設定最多可輸入文字數量。textarea的資料綁定方法與input相同。

<textarea v-model="textarea"></textarea>
<p style="white-space: pre-line;">多行文本內容:{{textarea}}</p>

• 這段程式中，為p標籤設定white-space樣式使其可以正常展示多行文本中的換行。
• 需注意的是，textarea 元素僅可透過v-model指令的方式來進行內容的設定，不能直接在標籤內插入文字。

核取方塊與單選按鈕

核取方塊

• 核取方塊為網頁提供多項選擇的功能，當將HTML中的input標籤類型設定為checkbox時，就會以核取方塊的樣式進行著色。
• 核取方塊通常會成組出現，而每個選項的狀態有兩種，選取與未選取，若只有一個核取方塊，則在使用v-model資料綁定時，會直接將其綁定為boolean值即可。

<input type="checkbox" value="足球" v-model="checkList"/>足球
<input type="checkbox" value="排球" v-model="checkList"/>排球
<input type="checkbox" value="籃球" v-model="checkList"/>籃球
<p>{{checkList}}</p>

• 這段程式可以為每個核取方塊元素設定特殊值，透過陣列屬性的綁定來獲取每個核取方塊是否被選取，若被選取，陣列中會存在其所連結的值，反之，則陣列中其連結的值會被刪除。

單選按鈕

• 單選按鈕的資料綁定邏輯與核取方塊類似，每個單選按鈕元素會設定一個值，並將同為一組的單選按鈕綁定到同個屬性，一組內的某個按鈕被選取時，對應綁定的變數值會替換為當前選取的單選按鈕之值。

<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女
<p>{{sex}}</p>

今天的介紹就先到這邊，明天要介紹的內容是選擇清單！