How to use enumeration types to implement HTML drop-down boxes in Vue-JS Tutorial-php.cn

How to use enumeration types to implement HTML drop-down boxes in Vue

亚连

Release： 2018-06-07 15:46:08

Original

2994 people have browsed it

This article introduces you step by step the relevant knowledge of Vue using enumeration types to implement HTML drop-down boxes. It is very good and has reference value. Friends in need can refer to the following

The drop-down box contains the Value in the option And the options used to display, generally the Value value is used in the background, rather than the options displayed in the foreground

Step 1: Write the enumeration type required for the drop-down box

StatusEnum.java

public enum StatusEnum {
 RED,
 YELLOW,
 GREEN
}

Copy after login

Step 2: Write the Value and displayed options to store the corresponding options in the drop-down box

StatusDTO.java

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

Copy after login

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

Copy after login

Step 4: Write js file

var statusModel ={
 selectStatus:[], //存放下拉框结果
 status:&#39;&#39;//存放选中结果
}
var selectVue = new Vue({
 el:&#39;#selectStatus&#39;,// 绑定DOM,一般是绑定p
 data:statusModel //标签中使用的model
})
var selectStatusResource = Vue.resource(&#39;/status/getStatus&#39;).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 == &#39;RED&#39; ? &#39;红色&#39; : statusList[i].code == &#39;YELLOW&#39; ? &#39;黄色&#39; : statusList[i].code == &#39;GREEN&#39; ? &#39;绿色&#39; : &#39;&#39;;
  list.push({code:statusList[i].code,name:status});
 }
 statusModel.selectStatus = list;
});

Copy after login

Step 5: Write html file

 <p 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 3px #96c0e7 inset;" v-model="status">
    <option value="-1">-请选择-</option>
    <option v-for="option in selectStatus" :value="option.code">{{option.name}}</option>
   </select>
  </p>

Copy after login

Display effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to make dynamic forms in angular

How to use child components to call parent components in ES6

How to use Eslint in Vue-cli to implement automatic formatting

The above is the detailed content of How to use enumeration types to implement HTML drop-down boxes in Vue. For more information, please follow other related articles on the PHP Chinese website!