選擇清單

• 選擇清單能夠提供一群組選項供使用者進行選擇，可以單選也可多選。
• HTML中是使用select標籤來定義選擇清單。
• 如果是單選的選擇清單，可以直接綁定到Vue元件的屬性上，如果是支援多選的選擇清單，則可以將其綁定到陣列屬性上。

單選清單

<select v-model="select">
<option>男</option>
<option>女</option>
</select>
<p>select</p>

• 在select標籤內部，option標籤用來定義一個選項，若要使用選擇清單支援多選的操作，只需為其新增multiple屬性即可。

多選清單

<select v-model="selectList" multiple>
<option>足球</option>
<option>排球</option>
<option>籃球</option>
</select>
<p>selectList</p>

• 執行程式後，在頁面中選擇時，點選command(control)鍵，即可進行多選。

常用的修飾符號

• 對表單進行資料綁定時，可使用修飾符號來控制綁定指令的一些行為，常用的有lazy與trim。

lazy

• lazy符號的作用類似於屬性的惰性載入。
• 當使用v-model指令對文字輸入框進行綁定時，都會同步修改對應屬性的值。在某些情況下，並不需要即時關注輸入框中文案的變化，這時就可以使用lazy修飾符號。

<input v-model.lazy="textField"/>
<p>文字輸入框內容：{{textField}}</p>

• 執行這段程式後，只有當使用者完成輸入，即輸入框失去焦點後，段落中才會同步輸入框中最終的文字資料。

trim

• trim符號的作用是將綁定的文字資料的首尾空格去除。
• 在許多場景中，使用者所輸入的文案都是要提交至服務端進行處理的，trim修飾符號處理首尾空格的特性可為開發者帶來許多的便利。

<input v-model.trim="textField"/>
<p>文字輸入框內容：{{textField}}</p>

今天的內容就到這邊了，明天會介紹的內容是樣式綁定。