<div id="app" class="mt-2">
  <div class="container text-center">
    <div class="card bg-light">
      {{ name }}，
      {{ gender }}性，
      {{ age }}歲。
      <br>
      {{ like.length? '喜歡' : '什麼都不喜歡'}}{{ like.join('、') }}
      <br>
      {{ member? '已':'未'}}成為吉娃娃lover
    </div>
    <br>
    <table class="container table table-bordered">
    <tr>
      <td>姓名</td>
      <td>
        <input type="text" v-model="name" class="w-75">
      </td>
    </tr>
    <tr>
      <td>性別</td>
      <td>
        <input type="radio" value='女' v-model="gender" class="mx-1">女
        <input type="radio" value='男' v-model="gender" class="mx-1">男
        <input type="radio" value='無' v-model="gender" class="mx-1">無
      </td>
    </tr>
    <tr>
      <td>年齡</td>
      <td>
        <select v-model='age'>
          <option>10</option>
          <option>10~19</option>
          <option>20~29</option>
          <option>30↑</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>喜歡</td>
      <td>
        <input type="checkbox" value="吉娃娃" v-model="like">吉娃娃
        <input type="checkbox" value="大頭" v-model="like">大頭
        <input type="checkbox" value="長臉" v-model="like">長臉
      </td>
    </tr>
    <tr>
      <td>會員</td>
      <td>
        <input type="checkbox" value="true" v-model="member">是
      </td>
    </tr>
   </table>
  </div>
</div>