How to use enumeration types to implement HTML drop-down boxes in Vue

亚连
Release: 2018-06-07 15:46:08
Original
2905 people have browsed it

This article introduces you step by step the relevant knowledge of Vue using enumeration types to implement HTML drop-down boxes. It is very good and has reference value. Friends in need can refer to the following

The drop-down box contains the Value in the option And the options used to display, generally the Value value is used in the background, rather than the options displayed in the foreground

Step 1: Write the enumeration type required for the drop-down box

StatusEnum.java

public enum StatusEnum { RED, YELLOW, GREEN }
Copy after login

Step 2: Write the Value and displayed options to store the corresponding options in the drop-down box

StatusDTO.java

public class StatusDTO { private String code; private String name; //setter , getter }
Copy after login

Step 3: Write the controller (resource)

statusResource.java

@Path("/status") public class statusResource{ @GET @Path("/getStatus") public List getStatus(){ List list = new ArrayList(); StatusDTO statusDTO = null; for(StatusEnum status : StatusEnum.values()){ statusDTO = new StatusDTO(); statusDTO.setCode(status.toString()); list.add(statusDTO); } return list; } }
Copy after login

Step 4: Write js file

var statusModel ={ selectStatus:[], //存放下拉框结果 status:''//存放选中结果 } var selectVue = new Vue({ el:'#selectStatus',// 绑定DOM,一般是绑定p 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; });
Copy after login

Step 5: Write html file

Copy after login

Display effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to make dynamic forms in angular

How to use child components to call parent components in ES6

How to use Eslint in Vue-cli to implement automatic formatting

The above is the detailed content of How to use enumeration types to implement HTML drop-down boxes in Vue. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
vue
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn