Vue使用枚举类型实现HTML下拉框步骤详解

前端之家收集整理的这篇文章主要介绍了Vue使用枚举类型实现HTML下拉框步骤详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

StatusEnum.java

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

StatusDTO.java

第三步: 编写controller (resource)

statusResource.java

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文件

标签中使用的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文件

Box-shadow: 3px 3px 3px #96c0e7 inset;" v-model="status">

显示效果:

总结

以上所述是小编给大家介绍的Vue使用枚举类型实现HTML下拉框步骤详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章