Comme je suis nouveau sur Vue.js, quelqu'un peut-il m'aider à supprimer une classe d'un élément de la même manière que nous le faisons dans JQuery.

$('.class1').removeClass("class2");
6
Ayaz Sayyed 20 nov. 2018 à 17:07

3 réponses

Meilleure réponse

D'après ce qui est écrit dans leur documentation, je dirais que c'est quelque chose que vous ne devriez pas faire dans votre code.

Au lieu de cela, vos classes CSS doivent être liées aux propriétés et la présence d'une classe doit être déterminée par la valeur de la propriété.

Exemple (à partir de documents):

<div v-bind:class="{ active: isActive }"></div>

La syntaxe ci-dessus signifie que la présence de la classe active sera déterminée par la véracité de la propriété de données isActive (si isActive IS true - la classe sera là).

Vous pouvez faire basculer plusieurs classes en ayant plus de champs dans l'objet. De plus, la directive v-bind:class peut également coexister avec l'attribut plain class. Donc, étant donné le modèle suivant:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

Et les données suivantes:

data: {
  isActive: true,
  hasError: false
}

Il rendra:

<div class="static active"></div>

Lorsque isActive ou hasError change, la liste des classes sera mise à jour en conséquence. Par exemple, si hasError devient vrai, la liste de classes deviendra static active text-danger.

Je pense que c'est la bonne façon de procéder :) Veuillez consulter la documentation pour plus de détails.

Si, pour une raison quelconque, vous devez supprimer une classe, vous pouvez ajouter jQuery en tant que dépendance à votre application et l'utiliser (mais ce n'est pas préférable).

Bon piratage :)

15
ikos23 20 nov. 2018 à 14:15

Mon cas affiche / masque modal en ajoutant CSS

Dans la balise élément html

<a href="#" class="copyright" v-on:click="show()">Add Line For Ad</a>

<modal name="qrcode">
 MODAL IS SHOW NOW!!.
</modal>

Et

export default {
  methods: {
    show: function() {
      this.$modal.show("qrcode");
    },
    hide() {
      this.$modal.hide("qrcode");
    },
    toggleBodyClass(className) {
      const el = document.body;
      // debugger;
      el.classList.remove(className);
    }
  },
  mounted() {
    this.toggleBodyClass("v--modal");
  }
};

Ce CSS

.v--modal {
  background: red;
}

J'espère que cette aide.

0
superup 10 avril 2020 à 08:26

Étant donné que vous avez cet élément

<div id="randomDiv">
  <p :style="{backgroundColor:color}" @click="updateBackgroundColor(color)">{{obj.name}}</p>
</div>

Le : style vous permet d'ajouter un style à l'élément, dans ce cas c'est le style backgroundColor que nous ajoutons, cela peut être n'importe quoi, et vous pouvez voir que une valeur de couleur qui vient de l'objet Vue ci-dessous. Celui-ci est initialement défini sur jaune dans l'objet vm = new Vue () . Cet objet possède également une fonction appelée updateBackgroundColor qui effectue la mise à jour. La couleur est passée dans cette fonction à partir du @clic dans l'élément.

var obj = {
  "name": "Curtis",
}


var vm = new Vue({
  el: '#randomDiv',
  data: function (){
    return  {
        obj,
        color: 'yellow',
    }
  },
  methods: {
        updateBackgroundColor: function (color) {
        console.log(color);
          if(color === "yellow"){
            this.$set(this.$data, 'color', 'red');
          }
          else{
            this.$set(this.$data, 'color', 'yellow');
          }
        }
    }
});

J'ai également collé ceci dans JsFiddle pour que vous puissiez le voir.

[

ife labolz 20 nov. 2018 à 15:31