vue.js implémente les méthodes des classes opérationnelles

Cette fois, je vais vous apporter la méthode d'exploitation des classes en vue.js. Quelles sont les précautions pour opérer les classes en vue.js. Voici des cas pratiques, jetons un oeil.

Récemment, j'ai besoin d'utiliser vue pour implémenter une page permettant de commander de la nourriture et de sélectionner les spécifications du produit. Je dois utiliser vue pour ajouter dynamiquement un nom de classe à l'élément cliqué afin de le faire changer de couleur pour les autres supprimez la classe . Comme le montre l'image :

html :

<p class="weui-mask" id="guige">
    <p class="guigeBox">
     <p class="guigeTitle">{{guigeName}}</p>
     <p class="guigeP guigeP01">规格</p>
     <p class="indexGuiGe">
      <span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}</span>
     </p>
     <p class="guigeP">口味</p>
     <p class="indexKouwie">
      <span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span>
     </p>
    </p>
   </p>

var guige=new Vue({
    el: '#guige',
    data:{
     guigeSpan:"-1", //控制点亮状态 -1为默认不点亮
     kouweiSpan:"-1", //控制点亮状态 
    },
   methods:{
     guige:function(index){ //当点击时候点亮，同级的span标签删除Class
      this.guigeSpan = index;
     },
     kouwei:function(index){
      this.kouweiSpan = index;
     },
    }
   })

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web chinois php Autres articles connexes !

Lecture recommandée :

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!