Vue中怎么利用枚举类型实现一个HTML下拉框-创新互联

今天就跟大家聊聊有关Vue中怎么利用枚举类型实现一个HTML下拉框,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

翼城网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联公司成立于2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

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

  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下拉框

看完上述内容,你们对Vue中怎么利用枚举类型实现一个HTML下拉框有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前名称:Vue中怎么利用枚举类型实现一个HTML下拉框-创新互联
URL地址:http://ybzwz.com/article/deecij.html

其他资讯