Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser les types d'énumération pour implémenter les listes déroulantes HTML dans Vue

亚连
Libérer: 2018-06-07 15:46:08
original
2990 Les gens l'ont consulté

Cet article vous présente étape par étape les connaissances pertinentes de Vue en utilisant les types d'énumération pour implémenter les listes déroulantes HTML. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer

Le drop. -down contient la valeur dans l'option Et les options utilisées pour afficher, généralement la valeur Valeur est utilisée en arrière-plan, plutôt que les options affichées au premier plan

Étape 1 : Écrivez le type d'énumération requis pour le liste déroulante

StatusEnum.java

public enum StatusEnum {
 RED,
 YELLOW,
 GREEN
}
Copier après la connexion

Étape 2 : Écrivez la valeur et les options affichées pour stocker les options correspondantes dans la liste déroulante

StatusDTO. java

public class StatusDTO {
 private String code;
 private String name;
 //setter , getter
}
Copier après la connexion

Troisième étape : écrire le contrôleur (ressource)

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;
 }
}
Copier après la connexion

Étape 4 : écrire le fichier js

var statusModel ={
 selectStatus:[], //存放下拉框结果
 status:&#39;&#39;//存放选中结果
}
var selectVue = new Vue({
 el:&#39;#selectStatus&#39;,// 绑定DOM,一般是绑定p
 data:statusModel //标签中使用的model
})
var selectStatusResource = Vue.resource(&#39;/status/getStatus&#39;).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 == &#39;RED&#39; ? &#39;红色&#39; : statusList[i].code == &#39;YELLOW&#39; ? &#39;黄色&#39; : statusList[i].code == &#39;GREEN&#39; ? &#39;绿色&#39; : &#39;&#39;;
  list.push({code:statusList[i].code,name:status});
 }
 statusModel.selectStatus = list;
});
Copier après la connexion

Étape 5 : Écrire un fichier HTML

 <p 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>
  </p>
Copier après la connexion

Effet d'affichage :

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile. tout le monde dans le futur.

Articles associés :

Comment créer des formulaires dynamiques en angulaire

Dans ES6, les composants enfants appellent les méthodes d'utilisation des composants parents

Comment utiliser Eslint dans Vue-cli pour implémenter le formatage automatique

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
vue
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal