1. 程式人生 > 實用技巧 >vue中表單的簡單應用(單選框,複選框,下拉框)

vue中表單的簡單應用(單選框,複選框,下拉框)

表單輸入

單選框
    <div>
<!-- 單選框一定要寫 value,且value是後端要去的數值 -->
性別:
<input type="radio" name='sex' value='0' v-model='regList.sex'> 男
<input type="radio" name='sex' value="1" v-model='regList.sex'> 女
</div>
複選框
 <div>
<!--
複選框:定義checkbox初始值,應是一個[] ,獲取值的時候,獲取的是value 的值
你也可以有預設值:eg:['play']
-->
<input type="checkbox" value='study' v-model='regList.hobby'>學習
<input type="checkbox" value='sleep' v-model='regList.hobby'>睡覺
<input type="checkbox" value='rap' v-model='regList.hobby'>唱歌
<input type="checkbox" value='play' v-model='regList.hobby'>打籃球

</div>
下拉框
      <!-- 
下拉框的雙向資料繫結,繫結在select標籤上。它的value 是option中的value
-->
工作種類: <select v-model='regList.job'>
<option value="" disabled>--請選擇--</option>
<option value="java">碼農後端</option>
<option value="web">大前端攻城獅</option>
<option value="test">最弱的測試</option>
<option value="ui">切圖仔</option>
</select>
一個checkbox
    <div>
<!-- 一個checkbox 複選框,我們初始值可以為空,獲取value的時候,是true或者false.我們的初始值也可以是true或者false -->
協議:<input type="checkbox" v-model='regList.isGree'>
</div>