Vue中如何利用枚举类型实现一个HTML下拉框

这篇文章主要介绍“Vue中如何利用枚举类型实现一个HTML下拉框”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中如何利用枚举类型实现一个HTML下拉框”文章能帮助大家解决问题。

第一步: 编写下拉框需要的枚举类型

  StatusEnum.java

public enum StatusEnum {  RED,  YELLOW,  GREEN }

第二步: 编写用来存放下拉框中对应的option中的Value和显示的选项

  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:[], //存放下拉框结果  status:''//存放选中结果 } var selectVue = new Vue({  el:'#selectStatus',// 绑定DOM,一般是绑定div  data:statusModel //标签中使用的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>

显示效果:

关于“Vue中如何利用枚举类型实现一个HTML下拉框”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。