基礎表單－核取方塊（checkbox）

input功能提供checkbox和radio兩種型態使用，先來講checkbox。
核取方塊是一個正方形方塊，當我們選擇時，那個選項就會被勾起來且可以多選。

每個選項都會綁定同一個資料模型（data）的屬性（下面的例子是蘋果、香蕉、芒果都綁定在fruit屬性），而且因為它也會有使用者回覆的問題，所以用雙向綁定。

<div id="app">
   <label><input type="checkbox" value="蘋果" v-model="fruit" >蘋果</label>
   <label><input type="checkbox" value="香蕉" v-model="fruit" >香蕉</label>
   <label><input type="checkbox" value="芒果" v-model="fruit" >芒果</label>
   <p>你選擇的是:{{fruit}}</p>
</div>

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

執行結果：

說明：
使用checkbox製作表單，用＜label＞＜/label＞把input包起來。
Label是用來給表單的控制元件一個說明標題，可以搭配input、textarea、select等等使用
type：選擇想要的型態，這裡打checkbox（如果是之後的radio，就打radio）。

value：value是選擇後會顯示的字，和input外的不一樣，input外的是選項的字。
什麼意思?!看看下面的對比會比較了解

<div id="app">
   <label><input type="checkbox" value="蘋果" v-model="fruit" >蘋果</label>
   <label><input type="checkbox" value="香蕉" v-model="fruit" >香蕉</label>
   <label><input type="checkbox" value="芒果" v-model="fruit" >芒果</label>
   <p>你選擇的是:{{fruit}}</p>
</div>

<div id="app">
   <label><input type="checkbox" value="蘋果" v-model="fruit" >1.蘋果</label>
   <label><input type="checkbox" value="香蕉" v-model="fruit" >2.香蕉</label>
   <label><input type="checkbox" value="芒果" v-model="fruit" >3.芒果</label>
   <p>你選擇的是:{{fruit}}</p>
</div>

選項有編號，陣列裡的沒有編號。

基礎表單－單選圓鈕（radio）

radio和checkbox非常相似，差別就只在於checkbox是複選，而radio是單選，在資料模型（data）裡，複選的我們會使用陣列（例：fruit:[]），單選則是要和value資料型態一樣，一般是使用字串（例：fruit:""）

<div id="app">
   <label><input type="radio" value="蘋果" v-model="fruit" >蘋果</label>
   <label><input type="radio" value="香蕉" v-model="fruit" >香蕉</label>
   <label><input type="radio" value="芒果" v-model="fruit" >芒果</label>
   <p>你選擇的是:{{fruit}}</p>
</div>

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

執行結果：