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 相关文章推荐
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
Javascript事件实例详解
Nov 06 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
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
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
JavaScript Archive Network 集合
2007/05/12 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
用jquery实现的一个超级简单的下拉菜单
2014/05/18 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
input输入框内容实时监测(附代码)
2017/08/15 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python实现文件的备份流程详解
2019/06/18 Python
英国在线自行车商店:Evans Cycles
2016/09/26 全球购物
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
个人授权委托书
2014/09/15 职场文书
科技活动周标语
2014/10/08 职场文书
狮子林导游词
2015/02/03 职场文书
运动会观后感
2015/06/09 职场文书
工作证明书
2015/06/15 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2016年清明节期间群众祭祀活动工作总结
2016/04/01 职场文书
原来闭幕词是这样写的呀!
2019/07/01 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android