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


Posted in Javascript onFebruary 05, 2018

下拉框包含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下拉框步骤详解

总结

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

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
使用jquery插件qrcode生成二维码
Oct 22 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
Vue动态获取width的方法
Aug 22 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
详解vue静态资源打包中的坑与解决方案
Feb 05 #Javascript
理解Koa2中的async&amp;await的用法
Feb 05 #Javascript
zTree 树插件实现全国五级地区点击后加载的示例
Feb 05 #Javascript
使用vue如何构建一个自动建站项目
Feb 05 #Javascript
在 webpack 中使用 ECharts的实例详解
Feb 05 #Javascript
在Vue中使用echarts的方法
Feb 05 #Javascript
You might like
基于mysql的bbs设计(一)
2006/10/09 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
基于Jquery实现键盘按键监听
2014/05/11 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
2019/11/01 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
python enumerate函数的使用方法总结
2017/11/15 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
django美化后台django-suit的安装配置操作
2020/07/12 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
Hawes & Curtis澳大利亚官网:英国经典服饰品牌
2018/10/29 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
精彩的大学生自我评价
2013/11/17 职场文书
学校实习推荐信
2015/03/27 职场文书
婚礼家长致辞
2015/07/27 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS