热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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 

第五步: 编写html文件

 

显示效果:

总结

以上所述是小编给大家介绍的Vue使用枚举类型实现HTML下拉框步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 并发编程 12—— 任务取消与关闭 之 shutdownNow 的局限性
    Java并发编程实践目录并发编程01——ThreadLocal并发编程02——ConcurrentHashMap并发编程03——阻塞队列和生产者-消费者模式并发编程04——闭锁Co ... [详细]
  • 本文详细介绍了钩子(hook)的概念、原理及其在编程中的实际应用。通过对比回调函数和注册函数,解释了钩子的工作机制,并提供了具体的Python示例代码,帮助读者更好地理解和掌握这一重要编程工具。 ... [详细]
  • 本文详细介绍如何在 iOS 7 环境下申请苹果开发者账号,涵盖从访问开发者网站到最终激活账号的完整流程。包括选择个人或企业账号类型、付款方式及注意事项等。 ... [详细]
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • 本文探讨了在 SQL Server 中使用 JDBC 插入数据时遇到的问题。通过详细分析代码和数据库配置,提供了解决方案并解释了潜在的原因。 ... [详细]
  • 本文详细比较了CSS选择器和XPath在Selenium中通过页面结构定位元素的优劣,并提供了具体的代码示例,帮助读者理解两者在不同场景下的适用性。 ... [详细]
  • 访问一个网页的全过程
    准备:DHCPUDPIP和以太网启动主机,用一根以太网电缆连接到学校的以太网交换机,交换机又与学校的路由器相连.学校的这台路由器与一个ISP链接,此ISP(Intern ... [详细]
  • 本文介绍了如何通过Java代码计算一个整数的位数,并展示了多个基础编程示例,包括求和、平均分计算、条件判断等。 ... [详细]
  • 本题要求在一组数中反复取出两个数相加,并将结果放回数组中,最终求出最小的总加法代价。这是一个经典的哈夫曼编码问题,利用贪心算法可以有效地解决。 ... [详细]
  • 本文介绍如何在Vue项目中配置Webpack,使JS代码作为入口文件直接嵌入到HTML中,而不是传统的HTML作为入口。 ... [详细]
  • 本文详细介绍了头条搜索引擎对网站内容的抓取、解析及索引过程,探讨了收录量与索引量的区别,并提供了实用工具和技巧来监控网站的收录情况。通过这些信息,网站管理员可以更好地理解搜索引擎的工作机制,优化网站内容以提高其在搜索结果中的可见性。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文汇集了一系列具有强烈设计感的网站模板,特别是来自知名平台WrapBootstrap的响应式网站模板。这些模板不仅美观,而且功能强大,适合各种类型的网站建设需求。 ... [详细]
  • 本篇文章介绍如何将两个分别表示整数的链表进行相加,并生成一个新的链表。每个链表节点包含0到9的数值,如9-3-7和6-3相加得到1-0-0-0。通过反向处理链表、逐位相加并处理进位,最终再将结果链表反向,即可完成计算。 ... [详细]
  • CentOS 系统管理基础
    本文介绍了如何在 CentOS 中查询系统版本、内核版本、位数以及磁盘分区的相关知识。通过这些命令,用户可以快速了解系统的配置和磁盘结构。 ... [详细]
author-avatar
尹洪2502855427
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有