Vue使用枚举类型实现HTML下拉框步骤详解
时间:2019-04-13
本文章向大家介绍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<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:[], //存放下拉框结果 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文件
<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;" v-model="status"> <option value="-1">-请选择-</option> <option v-for="option in selectStatus" :value="option.code">{{option.name}}</option> </select> </div>
显示效果:
总结
以上所述是小编给大家介绍的Vue使用枚举类型实现HTML下拉框步骤详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 【Golang语言社区--投稿专区】简单,好玩,有趣的命令行版12306(golang)
- 网游内存数据库的设计(1)
- 网游内存数据库的设计(2)
- Golang语言 上传文件
- Golang语言 监控文件变化小程序.
- Golang语言实现 tail 查看文本文件末行功能,类似于linux tail -n 100 功能
- Golang语言 实现线程池
- Golang实现类似Scan或者Scanf功能
- Golang不使用MD5比较文件内容是否一致
- go语言json操作指南
- 转-Golang自玩项目中一个重连机制实现.
- golang实现ping命令
- Go语言interface详解
- Go语言同步(Synchronization)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法