detaillierte Erl?uterung der Methode der bedingten Anwendung von CSS -Klassen in Vue.js

Kernpunkte:

• In Vue.js kann die bedingte Anwendung von CSS -Klassen durch Bindung von JavaScript -Objekten an class Attribute implementiert werden. Die Attribute des Objekts entsprechen dem CSS -Klassennamen, und sein Wert ist ein JavaScript -Ausdruck, der bestimmt, ob die Klasse angewendet werden soll.
• vue.js bietet zwei Syntaxe zum Erstellen von Klassenbindungen: Objektsyntax und Array -Syntax. Die Objektsyntax ist pr?gnanter, w?hrend die Array -Syntax den Vorlagencode l?schter macht. Welche Grammatik zu w?hlen ist, h?ngt von der pers?nlichen Pr?ferenz ab.
• vue.js unterstützt eine mehrfache Methode zur Bindung von bedingten Klassen, einschlie?lich der Verwendung tern?rer Operatoren, der Objektsyntax zur Bindung mehrerer Klassen, unter Verwendung von berechneten Eigenschaften, Kombination von statischen und Bindungsklassen und bedingten Bindungs ??-Inline -Stilen.

Manchmal die CSS -Klasse, die zur Laufzeit ge?ndert werden muss. Wenn Sie jedoch den Unterricht wechseln, ist es manchmal am besten, Stildetails bedingt anzuwenden. Angenommen, Ihre Ansicht hat einen Pager. Pager werden h?ufig verwendet, um gr??ere Projekts?tze zu navigieren. Beim Navigieren ist es für den Benutzer hilfreich, die Informationen auf der aktuellen Seite anzuzeigen. Der Projektstil ist nach der aktuell angezeigten Seite bedingt eingestellt. In diesem Fall k?nnte der Pager so aussehen:

In diesem Beispiel gibt es fünf Seiten, nur eine Seite kann gleichzeitig ausgew?hlt werden. Wenn Sie diesen Pager mit Bootstrap erstellen, wendet die ausgew?hlte Seite eine CSS -Klasse mit dem Namen active an. Diese Klasse ist nur erforderlich, wenn die Seite derzeit angezeigt wird. Mit anderen Worten, die CSS -Klasse muss bedingt angewendet werden. Glücklicherweise bietet Vue eine M?glichkeit, CSS -Klassen zur Laufzeit auf Elemente anzuwenden, die ich in diesem Artikel demonstrieren werde. Um CSS -Klassen zur Laufzeit bedingt anzuwenden, k?nnen Sie an ein JavaScript -Objekt binden. Um diese Aufgabe erfolgreich zu erledigen, müssen zwei Schritte ausgeführt werden. Zun?chst müssen Sie sicherstellen, dass die CSS -Klasse definiert ist. Erstellen Sie dann die Klassenbindung in der Vorlage. Ich werde diese Schritte im Rest dieses Artikels ausführlich erkl?ren. active

Schritt 1: Definieren Sie die CSS -Klasse

Angenommen, die im obigen Bild angezeigten fünfseitigen Elemente verwenden die folgende HTML -Definition:

Beachten Sie, dass jede Seite in diesem Code -Snippet ein Listenelementelement hat (das Element der dritten Listenelement enth?lt eine Klasse

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

active Schritt 2: Erstellen Sie eine Klasse -Bindung

Beim Erstellen von Klassenbindungen in einer Vorlage gibt es zwei Hauptoptionen: Verwenden Sie die Objektsyntax oder verwenden Sie die Array -Syntax. Ich werde Ihnen zeigen, wie Sie beide Methoden im Rest dieses Artikels verwenden.

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>

reduziert die Codemenge mit der integrierten v-for -Richtlinie von VUE. Diese Richtlinie wird verwendet, um Projekte in einer Schleife zu rendern. Das Element in diesem Beispiel ist die Seite selbst. Zus?tzlich zur Verwendung des Befehls v-for sollten Sie auch auf die Verwendung des Befehls v-bind achten. Die v-bind -Richtlinie verbindet das Attribut class des Elements mit der VUE -Instanz. Die VUE -Instanz ist wie folgt definiert:

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="{'page-item':true, 'active':(page === currentPage)}">
        <a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

Diese Vue -Instanz ist sehr einfach. Das obige data -Objekt enth?lt eine Eigenschaft mit dem Namen currentPage. Wenn Sie die oben definierte HTML -Vorlage erneut besuchen, werden Sie feststellen, dass auf diese Eigenschaft verwiesen wird. Tats?chlich sieht das JavaScript -Objekt, das jeder Klassenbindung zugeordnet ist

var app = new Vue({
  el: 'http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyApp',
  data: {
    totalPages: 5,
    currentPage: 3
  }
});

Dieses Objekt definiert zwei Eigenschaften:

und page-item. Es ist erw?hnenswert, dass dies die beiden in Schritt 1 diskutierten Namen der CSS -Klasse sind. In Schritt 2 sind diese beiden Klassenreferenzen im JavaScript -Objekt zu Eigenschaftsnamen geworden. Der mit diesen Eigenschaftsnamen verbundene Wert ist ein JavaScript -Ausdruck. Wenn der Ausdruck auf echte Werte bewertet wird, wird die CSS -Klasse einbezogen. Wenn der Ausdruck auf False bewertet wird, enth?lt active die CSS -Klasse nicht. Lassen Sie uns unter Berücksichtigung dieser Regeln jedes Attribut betrachten. Der Wert der ersten Eigenschaft ist . Dieser hartcodierte Wert wird verwendet, da die Klasse page-item immer erforderlich ist. Die zweite Eigenschaft true verwendet JavaScript -Ausdrücke. Wenn dieser Ausdruck wahr ist, wird die page-item -Kl?ufe angewendet. Dies erm?glicht es uns, die active -Klasse bedingt entsprechend dem Wert von active zu anwenden. Eine andere M?glichkeit, die currentPage -Klasse bedingt anzuwenden, besteht darin, an ein Array zu binden. active active Bindung mit Array -Syntax

vue erm?glicht es, Listen der CSS -Klassen durch Bindung an ein Array anzuwenden. Wenn Sie die Array -Syntax verwenden m?chten, wird die in Schritt 1 angezeigte HTML:

{'page-item':true, 'active':(page === currentPage)}

und data. Der aktualisierte Vue -Initialisierungscode, der diese Eigenschaften enth?lt, lautet wie folgt: pageItemClass activeClass

<div id="myApp">
  <nav aria-label="An example with pagination">
    <ul class="pagination">
      <li v-for="page in totalPages" :class="[pageItemClass, (page === currentPage) ? activeClass : '']">
        <a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">{{ page }}</a>
      </li>
    </ul>
  </nav>
</div>

data

Ich hoffe, dieser Artikel wird Ihnen hilfreich sein. Wenn Sie mehr über Vue.js erfahren m?chten, k?nnen Sie sich andere Vue -Inhalte auf SitePoint ansehen.

Wie verwendet ich tern?re Operatoren für die bedingte Klassenbindung?

<div id="myApp">
  <nav aria-label="Page navigation example">
    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">1</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">2</a></li>
      <li class="page-item active"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">3</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">4</a></li>
      <li class="page-item"><a class="page-link" href="http://www.miracleart.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">5</a></li>
    </ul>
  </nav>
</div>