Shulou(Shulou.com)05/31 Report--

In this article Xiaobian for you to introduce in detail "Vue how to use enumerated types to achieve a HTML drop-down box", detailed content, clear steps, details handled properly, I hope that this "Vue how to use enumerated types to achieve a HTML drop-down box" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

Step 1: write the enumeration types required for the drop-down box

StatusEnum.java

Public enum StatusEnum {RED, YELLOW, GREEN}

Step 2: write options to store the Value and display in the corresponding option in the drop-down box

StatusDTO.java

Public class StatusDTO {private String code; private String name; / / setter, getter}

Step 3: write 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;}}

Step 4: write the js file

Var statusModel = {selectStatus: [], / / the drop-down box results status:''// stores the selected result} var selectVue = new Vue ({el:'#selectStatus',// binds DOM, usually the model used in the binding div data:statusModel / / tag}) 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文件 -请选择- {{option.name}} 显示效果:

Read this, the "Vue how to use enumerated types to achieve a HTML drop-down box" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.