How to implement a HTML drop-down box with enumerated types in Vue
In this article Xiaobian for you to introduce in detail "Vue how to use enumerated types to achieve a HTML drop-down box", detailed content, clear steps, details handled properly, I hope that this "Vue how to use enumerated types to achieve a HTML drop-down box" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.
Step 1: write the enumeration types required for the drop-down box
StatusEnum.java
Public enum StatusEnum {RED, YELLOW, GREEN}
Step 2: write options to store the Value and display in the corresponding option in the drop-down box
StatusDTO.java
Public class StatusDTO {private String code; private String name; / / setter, getter}
Step 3: write controller (resource)
StatusResource.java
@ Path ("/ status") public class statusResource {@ GET @ Path ("/ getStatus") public List getStatus () {List list = new ArrayList (); StatusDTO statusDTO = null; for (StatusEnum status: StatusEnum.values ()) {statusDTO = new StatusDTO (); statusDTO.setCode (status.toString ()); list.add (statusDTO);} return list;}}
Step 4: write the js file
Var statusModel = {selectStatus: [], / / the drop-down box results status:''// stores the selected result} var selectVue = new Vue ({el:'#selectStatus',// binds DOM, usually the model used in the binding div data:statusModel / / tag}) 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文件 -请选择- {{option.name}} 显示效果:
Read this, the "Vue how to use enumerated types to achieve a HTML drop-down box" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.
