Clever Geek Handbook

Vue.js für Anfänger Lektion 3: Bedingtes Rendern

Wir setzen unseren Trainingskurs auf Vue, die von Natalia Teplukhina, Staff Engineer bei Gitlab und Core Team Member des Vue Rahmen empfohlen wurde (Q / A - Session mit Natasha fand auf unserem instagram , und Sie können das Protokoll lesen Sie hier ).



In der dritten Lektion werden wir ĂĽber bedingtes Rendern sprechen. So zeigen Sie etwas auf der Seite nur an, wenn eine Bedingung erfĂĽllt ist.







→ Vue.js Anfänger Lektion 1: Instanz Vue

→ Vue.js für Anfänger, Lektion 2: Bindungsattribute

→ Vue.js Anfänger Lektion 3: Bedingtes Rendern

→ Vue.js Anfänger Lektion 4: Listen rendern

→ Vue .js für Anfänger Lektion 5: Ereignisverarbeitung

→ Vue.js Anfänger Lektion 6: Binden von Klassen und Stilen

→ Vue.js Anfänger Lektion 7: berechnete Eigenschaften

→ Vue.js Anfänger Lektion 8: Komponenten



Der Zweck der Lektion



Wir benötigen eine Beschriftung auf der Produktkarte, die den Besucher darüber informiert, ob das Produkt auf Lager ist oder nicht. Wenn das Produkt auf Lager ist, sollte eine Beschriftung angezeigt werden In Stock. Wenn es nicht auf Lager ist - eine Inschrift Out of Stock. Die Entscheidung, eine bestimmte Inschrift anzuzeigen, sollte auf der Grundlage der in der Anwendung gespeicherten Daten getroffen werden.



Anfangscode



Hier ist der Code, mit dem wir beginnen werden. Es ist wie ĂĽblich in der Datei index.html, im Tag <body>: 



<div id="app">
  <div class="product">
    <div class="product-image">
      <img :src="image" />
    </div>

    <div class="product-info">
      <h1>{{ product }}</h1>
    </div>
  </div>
</div>


In der Datei main.jswird beim Einrichten einer Vue-Instanz das folgende Datenobjekt verwendet: 



data: {
    product: "Socks",
    image: "./assets/vmSocks-green.jpg",
    inStock: true
}


Beachten Sie, dass dem Objekt dataeine neue Eigenschaft hinzugefügt wurde. Dies ist eine Eigenschaft inStock, die einen booleschen Wert enthält true.



Aufgabe



Bei der Entwicklung von Webanwendungen muss häufig ein Element auf der Seite angezeigt werden, abhängig von der Erfüllung einer bestimmten Bedingung. Wenn beispielsweise der Lagerbestand eines Artikels abgelaufen ist, müssen Sie dies auf der Artikelkarte mitteilen.



Die entsprechenden Nachrichten sollen als Elemente ausgegeben werden <p>. Dies bedeutet, dass irgendwo index.htmldarin die folgenden Elemente vorhanden sind: 



<p>In Stock</p>
<p>Out of Stock</p>


Unsere Aufgabe ist es, einen von ihnen zurĂĽckzuziehen, falls die Waren auf Lager sind, und den anderen, wenn die Waren nicht auf Lager sind.



Die Lösung des Problems



In Vue sieht die Lösung dieses Problems einfach und unkompliziert aus.



Wie Sie bereits wissen, werden Daten, die auf das Vorhandensein oder Fehlen von Waren auf Lager hinweisen main.js, im Objekt beschrieben data: 



inStock: true


Um dem System mitzuteilen, welches Element <p>gerendert werden soll, können wir die Direktiven v-ifund verwenden v-else. Dies bedeutet, dass index.htmlFolgendes fallen wird in : 



<p v-if="inStock">In Stock</p>
<p v-else>Out of Stock</p>


Wenn inStockein wahrer Wert enthalten ist, wird der erste Artikel gedruckt <p>. Andernfalls wird das zweite Element angezeigt. In unserem Fall inStockwird der Wert so geschrieben true, dass er angezeigt wird In Stock.





Wir haben Lagerbestände auf Lager.



Großartig! Wir haben gerade das bedingte Rendern verwendet, um Produktdetails anzuzeigen. Wir haben das Problem gelöst. Aber lassen Sie uns hier nicht aufhören und unsere Erforschung des bedingten Renderns fortsetzen.



V-else-if-Direktive



Unser Mechanismus fĂĽr das bedingte Rendern basiert auf den Richtlinien v-ifund v-elsekann durch HinzufĂĽgen einer weiteren Logikebene erweitert werden. Dies kann mit der Direktive erfolgen v-else-if. Um dies zu demonstrieren, wollen wir unser Beispiel ein wenig komplizieren.



Nehmen wir an, dass das Objekt data, in main.js, hat Informationen ĂĽber die Menge der Waren. Sie sind in der Eigenschaft gespeichert inventory: 



inventory: 100


Durch die Analyse dieser Eigenschaft mithilfe von in Anführungszeichen eingeschlossenen JavaScript-Ausdrücken können wir Seitenbesuchern genauere Produktinformationen bereitstellen: 



<p v-if="inventory > 10">In stock</p>
<p v-else-if="inventory <= 10 && inventory > 0">Almost sold out!</p>
<p v-else>Out of stock</p>


In dieser Situation wird das erste Element auf der Seite angezeigt <p>, da sich der entsprechende Ausdruck als wahr herausstellt.



V-Show-Richtlinie



Wenn ein bestimmtes Element der Seite häufig ausgeblendet und angezeigt werden muss, ist es zur Implementierung dieses Mechanismus sinnvoll, die Direktive zu betrachten v-show. Ein Element mit einer solchen Direktive ist immer im DOM vorhanden, aber es ist nur sichtbar, wenn sich herausstellt, dass die an die Direktive übergebene Bedingung wahr ist. In der Tat sprechen wir über die Tatsache, dass dank der Verwendung dieser Direktive eine CSS-Eigenschaft nach Bedingung auf das Element angewendet wird display: none.



Diese Methode bietet eine bessere Leistung als die Verwaltung von Elementen mit v-ifund v-else.



Die Anwendung dieser Richtlinie sieht folgendermaĂźen aus: 



<p v-show="inStock">In Stock</p>


Die Lösung für unser Problem, in der die Richtlinien v-ifund verwendet wurden v-else, passt zu uns. Deshalb werden wir uns darauf konzentrieren und nichts ändern.



Werkstatt



FĂĽgen Sie dem Datenobjekt eine Eigenschaft hinzu onSale. Es sollte verwendet werden, um das Rendern eines Elements zu steuern, das <span>Text anzeigt On Saleund Besucher ĂĽber den Verkauf informiert.



Hier ist eine Vorlage, mit der Sie dieses Problem lösen können.



Hier ist die Lösung des Problems.



Ergebnis



Heute haben Sie das bedingte Rendern mit Vue kennengelernt. Es ging nämlich um Folgendes:



  • Es gibt Vue-Anweisungen, mit denen Sie Elemente bedingt rendern können:



    • v-wenn
    • v-else-if
    • v-else
    • V-Show
  • Bei der Arbeit mit Anweisungen können Sie JavaScript-AusdrĂĽcke verwenden, die in AnfĂĽhrungszeichen an sie ĂĽbergeben werden.
  • Wenn der in AnfĂĽhrungszeichen an die Direktive ĂĽbergebene Ausdruck wahr ist, wird das Element ausgegeben.
  • Die Direktive v-showwirkt sich nur auf die Sichtbarkeit eines Elements aus, fĂĽgt keine Elemente in das DOM ein und entfernt keine Elemente aus dem DOM.


Haben Sie ein Problem, das Sie nach Beginn Ihrer Bekanntschaft mit Vue bereits mit Hilfe dieses Frameworks lösen möchten?



→ Vue.js Anfänger Lektion 1: Instanz Vue

→ Vue.js für Anfänger, Lektion 2: Bindungsattribute

→ Vue.js Anfänger Lektion 3: Bedingtes Rendern

→ Vue.js Anfänger Lektion 4: Listen rendern

→ Vue .js für Anfänger Lektion 5: Ereignisverarbeitung

→ Vue.js Anfänger Lektion 6: Binden von Klassen und Stilen

→ Vue.js Anfänger Lektion 7: berechnete Eigenschaften

→ Vue.js Anfänger Lektion 8: Komponenten





More articles:


All Articles