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插件实现图片延迟加载技术详细说明
Mar 12 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
May 14 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
详解AngularJS中的表达式使用
2015/06/16 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
Python使用asyncio包处理并发详解
2017/09/09 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
django有外键关系的两张表如何相互查找
2020/02/10 Python
python Canny边缘检测算法的实现
2020/04/24 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
拉歌口号大全
2014/06/13 职场文书
投资申请报告
2015/05/19 职场文书
社区安全温馨提示语
2015/07/14 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
cypress测试本地web应用
2022/06/01 Javascript