classe d'opération de clic vue.js

Cette fois, je vais vous présenter la classe d'opération de clic vue.js. Quelles sont les précautions de la classe d'opération de clic vue.js. Voici un cas pratique, jetons un coup d'œil.

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 :

J'ai commencé à chercher de nombreuses méthodes sur Internet et j'ai trouvé qu'elles n'étaient pas très utiles. Finalement, j'ai trouvé une bonne découverte. Enregistrez-la. 🎜>

html :

script :

<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>

Je pense 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. vers d'autres articles connexes sur le site Web php chinois !

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;
     },
    }
   })

Lecture recommandée :

vue réalise une liaison à trois niveaux

Utilisation du plug-in swiper dans vue

Explication détaillée de l'utilisation du composant de journal express par défaut Morgan

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!