VUE.JS Dynamic Style Application: Wie kann ich die Elementmargen basierend auf den Booleschen Werten korrekt ändern?

VUE.JS Dynamischer Stil: Verwenden Sie den CSS -Selektor geschickt, um das Problem der Margenmodifikation zu lösen

In der Entwicklung von VUE.JS ist die dynamische Anpassung des Elementstils eine häufige Anforderung. In diesem Artikel wird ein Problem über die dynamische Modifizierung von Elementmargen basierend auf booleschen Werten gelöst.

Problembeschreibung:

Der Entwickler versucht, die Ränder des Elements zu kontrollieren, indem der dynamische Klassennamen active bin. Wenn sich der boolesche iscollapse ändert, sollte der active Klassenname hinzugefügt oder entfernt werden, wodurch padding-left des Elements geändert werden. Der anfängliche CSS -Code ist jedoch ungültig.

Code -Snippet:

Vue -Komponentencode:

<div :class="{ active: iscollapse }" class="content">
  <myheader :iscollapse="!iscollapse"></myheader>
</div>

Data () {
  zurückkehren {
    Iscollapse: Falsch
  };
},
Methoden: {
  Changemenu () {
    this.iscollapse =! this.iscollapse;
  }
}

Ungültiger anfänglicher CSS -Code:

 .Inhalt {
  Padding-Links: 200px;
  .Active {
    Padding-Links: 65px;
  }
}

Problemanalyse:

Das Problem ist die Verwendung von CSS -Selektor. .content anfängliche Code .active den Nachkommensauswahl .content .active In der Tat wirkt die active Klasse direkt auf das .content .

Lösung:

Der richtige CSS -Selektor sollte .content .content.active sein active

Richtiger CSS -Code:

 .Inhalt {
  Padding-Links: 200px;
}
.Content.active {
  Padding-Links: 65px;
}

Oder es ist einfacher, SASS zu verwenden:

 .Inhalt {
  Padding-Links: 200px;
  & .aktiv {
    Padding-Links: 65px;
  }
}

Der SASS -Code entspricht dem obigen CSS -Code nach der Kompilierung. Beide stellen sicher, dass padding-left: 65px Stil nur angewendet wird, wenn das Element .content gleichzeitig active Klassen verfügt, wodurch das Problem des Stilfehlers gelöst wird, das durch Nachkommensauswahlern im ersten Code verursacht wird.

Das obige ist der detaillierte Inhalt vonVUE.JS Dynamic Style Application: Wie kann ich die Elementmargen basierend auf den Booleschen Werten korrekt ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!