在Vue中如何使用枚举类型实现HTML下拉框

本文分步骤给大家介绍了vue使用枚举类型实现html下拉框的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下

下拉框包含option中的Value和用来显示的选项， 一般后台都是使用的Value值，而不是显示在前台的选项

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

  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,一般是绑定p 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 
第五步: 编写html文件
 
       -请选择-    {{option.name}}     
登录后复制
显示效果:
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angular中如何制作动态表单
在angular中如何制作动态表单
在angular中如何制作动态表单
以上就是在Vue中如何使用枚举类型实现HTML下拉框的详细内容，更多请关注【创想鸟】其它相关文章！