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,一般是绑定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下拉框步骤详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。