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 相关文章推荐
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
jQuery实现的简洁下拉菜单导航效果代码
Aug 26 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
详解vue项目中调用百度地图API使用方法
Apr 25 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
javascript实现轮显新闻标题链接
2007/08/13 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python列表和元组的定义与使用操作示例
2017/07/26 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
详解python datetime模块
2020/08/17 Python
python归并排序算法过程实例讲解
2020/11/04 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
python 模拟登陆163邮箱
2020/12/15 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
干部作风建设工作总结
2014/10/29 职场文书
大国崛起观后感
2015/06/02 职场文书
培训班开班主持词
2015/07/02 职场文书
导游词之无锡古运河
2019/11/14 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python