Vue détermine l'utilisation des classes dans le dom

Cette fois, je vais vous présenter l'utilisation de la classe dans Vue pour juger le dom. Quelles sont les précautions pour que Vue juge la classe dans le dom. cas pratique, jetons un coup d'oeil.

vue clique pour ajouter une classe au dom puis obtient le dom contenant la classe

<p class="chose-ck" v-for="(item,index2) in colors" :key="index2" ref="chosebox">
                  <p>{{item.name}}</p>
                  <dt v-for="(item2,index) in item.childsCurGoods" :key="item2.id" :class="index==iac[index2]?&#39;check&#39;:&#39;&#39;" :id="item2.id" :data-chosename="item.name" :data-choseidname="item2.name" :data-chose="item.id" :data-id="item2.id" @click="chek(index2,index)" >
                    {{item2.name}}
                  </dt>
                </p>js
  chek(index2, index) {
      this.iac[index2] = index
      this.iac = this.iac.concat([]);
      this.checkchose()
    },
    checkchose:function(){
      var chose=this
      var chosedom=chose.$refs.chosebox
      console.log(chosedom)
      for (var i=0;i<chosedom.length;i++) {
        var children=chosedom[i].children
        for (var j=0;j<children.length;j++) {  
          if(children[j].className=="check")
          {
            console.log(children[j])
          }
        }
      }
    }

Le dom obtenu après clic est imprimé

if(children[j].className=="check")

Ajouté pour déterminer pourquoi le dom imprimé est le dom avant de cliquer

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article S'il vous plaît. faites attention au site Web chinois php pour un contenu plus passionnantAutres articles connexes !

Lecture recommandée :

Explication détaillée des étapes pour mettre en œuvre le compte public WeChat mobile dans vue

Explication détaillée des étapes pour ajouter une interface simulée en arrière-plan dans le projet vue-cli

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!