基礎表單－單選選單（select）

單選選單是有下拉式選項可以選擇，在很多網頁填表單的時候都會遇到，通常是選項很多的時候會使用，例如：生日年月日、職業等。

範例：

<div id="app">
   <select v-model="grade">
       <option value="大一">大一</option>
       <option value="大二">大二</option>
       <option value="大三">大三</option>
       <option value="大四">大四</option>
   </select>
   <p>你選擇的是:{{grade}}</p>
</div>

<script>
   var app =Vue.createApp({
       data:function() {
            return {
               grade:"",
            }
       },
   });
   app.mount('#app');
</script>

執行結果：

select的雙向綁定要綁定在select這個element上，就不用像checkbox和radio一樣，每個選項都要綁定，再把選項輸入在option element裡，這裡是每個選項要一個option element包住。
而資料模型data裡，因為select和radio一樣是單選，所以屬性是用字串資料型態。

基礎表單－多選選單（multiple select）

select也可以設定成多選，會使用滾動式的選單讓使用者選擇，只要在雙向綁定後加上multiple就可以變為多選，但因為是多選，資料模型裡的資料型態也要更改為陣列。

範例：

<div id="app">
   <select v-model="grade" multiple>
       <option value="大一">大一</option>
       <option value="大二">大二</option>
       <option value="大三">大三</option>
       <option value="大四">大四</option>
   </select>
   <p>你選擇的是:{{grade}}</p>
</div>

<script>
   var app =Vue.createApp({
       data:function() {
           return {
              grade:[],
           }
       },
   });
   app.mount('#app');
</script>

執行結果：

（執行後要選擇多個選項，要按住ctrl鍵再點擊選項）

到這裡，v-model資料雙向綁定大致上完成了，明天即將進入事件處理~