下拉框包含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<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:[] //存放下拉框结果}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" 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;"> ???????????????<option value="-1">-请选择-</option> ???????????????<option v-for="option in selectStatus" :value="option.code">{{option.name}}</option> ???????????</select> ???????</div>显示效果:
Vue使用枚举类型实现HTML下拉框
原文地址：https://www.cnblogs.com/gczmn/p/8417784.html