Vue implements HTML drop-down box using enumeration type

The drop-down box contains the value in option and the options used to display it, and the general background is to use the values instead of the options displayed in the foreground

First step: Write the enumeration type required by the drop-down box

Statusenum.java

 Public enum Statusenum {    RED,    YELLOW,    GREEN}

Step Two: Write the option to hold 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 three: Write a controller (resource)

Statusresource. java

@Path ("/status") Public classstatusresource{@GET @Path ("/getstatus")     PublicList<statusdto>GetStatus () {List<StatusDTO> list =NewArraylist<statusdto>(); Statusdto Statusdto=NULL;  for(Statusenum status:StatusEnum.values ()) {Statusdto=Newstatusdto ();            Statusdto.setcode (Status.tostring ());        List.add (statusdto); }        returnlist; }}

Fourth step: Write JS file

varStatusmodel ={selectstatus:[]//Store drop-down box results}varSelectvue =NewVue ({el:' #selectStatus ',//binding the DOM, typically a bound divData:statusmodel//the model used in the label})varSelectstatusresource = Vue.resource ('/status/getstatus '). Get (). Then (function(response) {varStatuslist =Response.data; varList = []; varStatus =NULL;  for(vari = 0; i < statuslist.length; i++) {Status= Statuslist[i].code = = = ' RED '? ' Red ': statuslist[i].code = = ' YELLOW '? ' Yellow ': statuslist[i].code = = ' GREEN '? ' Green ': ';    List.push ({code:statuslist[i].code,name:status}); } statusmodel.selectstatus=list;});

Fifth step: Writing HTML files

 <DivID= "Selectstatus"style= "width:140px;height:37px;text-align:right;margin:0 2px;position:relative;float:left;">            <SelectID= "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; ">                <optionvalue= "-1">-Please select-</option>                <optionv-for= "option in Selectstatus": Value= "Option.code">{{Option.name}}</option>            </Select>        </Div>

Display effect:

Vue implements HTML drop-down box using enumeration type