Vue uses Enumeration type to implement detailed steps in HTML drop-down box, vue drop-down box

Vue uses Enumeration type to implement detailed steps in HTML drop-down box, vue drop-down box

The drop-down box contains the Value in option and the option to be displayed. Generally, the Value is used in the background, rather than the option displayed on the foreground.

Step 1: Compile the enumerated types required by the drop-down box

StatusEnum. java

public enum StatusEnum { RED, YELLOW, GREEN}

Step 2: Compile the Value and displayed options used to store the corresponding option in the drop-down box.

StatusDTO. java

public class StatusDTO { private String code; private String name; //setter , getter}

Step 3: Compile the 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; }}

Step 4: Compile js files

Var statusModel = {selectStatus: [], // store the drop-down box Result status: ''// store the selected result} var selectVue = new Vue ({el: '# selectStatus ', // bind the DOM, which is usually bound to the div data: statusModel // model used in the 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 '? 'Red': statusList [I]. code = 'yellow '? 'Yellow': statusList [I]. code = 'green '? 'Green': ''; list. push ({code: statusList [I]. code, name: status}) ;} statusModel. selectStatus = list ;});

Step 5: Compile html files

<Div id = "selectStatus" style = "width: 140px; height: 37px; text-align: right; margin: 0 2px; position: relative; float: left; "> <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 #96c0e7 inset; "v-model =" status "> <option value ="-1 ">-select-</option> <option v-for =" option in selectStatus ": value = "option. code "> {option. name }}</option> </select> </div>

Display Effect:

Summary

The above section describes how to use the enumeration type of Vue to implement the HTML drop-down box. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!