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 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; }}

第四步: 编写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文件

 
       -请选择-    {{option.name}}     

显示效果:

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