您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue中如何利用枚舉類型實(shí)現(xiàn)一個(gè)HTML下拉框”的相關(guān)知識(shí),小編通過實(shí)際案例向大家展示操作過程,操作方法簡單快捷,實(shí)用性強(qiáng),希望這篇“Vue中如何利用枚舉類型實(shí)現(xiàn)一個(gè)HTML下拉框”文章能幫助大家解決問題。
第一步: 編寫下拉框需要的枚舉類型
StatusEnum.java
public enum StatusEnum { RED, YELLOW, GREEN }
第二步: 編寫用來存放下拉框中對應(yīng)的option中的Value和顯示的選項(xiàng)
StatusDTO.java
public class StatusDTO { private String code; private String name; //setter , getter }
第三步: 編寫controller (resource)
statusResource.java
@Path("/status") public class statusResource{ @GET @Path("/getStatus") public List<StatusDTO> getStatus(){ List<StatusDTO> list = new ArrayList<StatusDTO>(); StatusDTO statusDTO = null; for(StatusEnum status : StatusEnum.values()){ statusDTO = new StatusDTO(); statusDTO.setCode(status.toString()); list.add(statusDTO); } return list; } }
第四步: 編寫js文件
var statusModel ={ selectStatus:[], //存放下拉框結(jié)果 status:''//存放選中結(jié)果 } var selectVue = new Vue({ el:'#selectStatus',// 綁定DOM,一般是綁定div data:statusModel //標(biāo)簽中使用的model }) var selectStatusResource = Vue.resource('/status/getStatus').get().then(function (response) { var statusList = response.data; var list = []; var status = null; for(var i = 0; i < statusList.length; i++){ status = statusList[i].code == 'RED' ? '紅色' : statusList[i].code == 'YELLOW' ? '黃色' : statusList[i].code == 'GREEN' ? '綠色' : ''; list.push({code:statusList[i].code,name:status}); } statusModel.selectStatus = list; });
第五步: 編寫html文件
<div id="selectStatus" > <select id="status" style="width:100%;background: #ddebff;height: 35px;color: #082451; border: 1px solid #082451;border-radius: 2px;font-size: 12px; box-shadow: 3px 3px 3px #96c0e7 inset;" v-model="status"> <option value="-1">-請選擇-</option> <option v-for="option in selectStatus" :value="option.code">{{option.name}}</option> </select> </div>
顯示效果:
關(guān)于“Vue中如何利用枚舉類型實(shí)現(xiàn)一個(gè)HTML下拉框”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。