Heim >Web-Frontend >View.js >Fähigkeiten zum bedingten Rendern von Vue enthüllt: Lernen Sie, v-if, v-show, v-else und v-else-if zu verwenden, um eine flexible Steuerung zu erreichen
Vue-Fähigkeiten für bedingtes Rendering enthüllt: Lernen Sie, v-if, v-show, v-else und v-else-if zu verwenden. Um eine flexible Steuerung zu erreichen, benötigen Sie spezifische Codebeispiele
In Vue ist bedingtes Rendering sehr wichtig wichtige Aufgabe Eine wichtige Technik, mit der das Anzeigen und Ausblenden von Komponenten oder Elementen basierend auf bestimmten Bedingungen gesteuert werden kann. Vue bietet eine Vielzahl bedingter Rendering-Anweisungen, darunter v-if, v-show, v-else, v-else-if usw. Dieser Artikel befasst sich mit den Verwendungstechniken dieser Anweisungen und gibt spezifische Codebeispiele.
<template> <div> <h1 v-if="showHeading">显示标题</h1> <p v-else>隐藏标题</p> </div> </template> <script> export default { data() { return { showHeading: true }; } }; </script>
In diesem Beispiel verwenden wir die v-if-Direktive, um basierend auf dem Wert von showHeading zu bestimmen, ob der Titel angezeigt werden soll. Wenn der Wert von showHeading wahr ist, wird der Titel gerendert; wenn der Wert von showHeading falsch ist, wird der Absatz mit dem ausgeblendeten Titel gerendert.
<template> <div> <h1 v-show="showHeading">显示标题</h1> <p v-show="!showHeading">隐藏标题</p> </div> </template> <script> export default { data() { return { showHeading: true }; } }; </script>
In diesem Beispiel verwenden wir den Befehl v-show, um die Anzeige und das Ausblenden des Titels basierend auf dem Wert von showHeading zu steuern. Im Vergleich zu v-if ist die Logik von v-show einfacher, da sie nur das Anzeigen und Ausblenden von Elementen über CSS-Stile steuert.
<template> <div> <h1 v-if="showHeading">显示标题</h1> <p v-else>隐藏标题</p> </div> </template> <script> export default { data() { return { showHeading: true }; } }; </script>
Wenn in diesem Beispiel der Wert von showHeading wahr ist, wird das Element mit dem angezeigten Titel gerendert; wenn der Wert von showHeading falsch ist, wird der Absatz mit dem ausgeblendeten Titel gerendert .
<template> <div> <h1 v-if="rating >= 9">优秀</h1> <h2 v-else-if="rating >= 6">良好</h2> <h3 v-else-if="rating >= 3">及格</h3> <h4 v-else>不及格</h4> </div> </template> <script> export default { data() { return { rating: 8 }; } }; </script>
In diesem Beispiel verwenden wir basierend auf dem Wert der Bewertung die Anweisungen v-if und v-else-if, um die Bewertungsstufe zu bestimmen und verschiedene Titel entsprechend darzustellen. Wenn der Bewertungswert größer oder gleich 9 ist, wird ein ausgezeichneter Titel vergeben. Wenn der Bewertungswert größer oder gleich 6 ist, wird ein guter Titel vergeben, wenn der Bewertungswert größer oder gleich 3 ist. ein bestandener Titel wird vergeben; wenn der Bewertungswert größer oder gleich 3 ist, wird ein bestandener Titel vergeben; wenn der Wert kleiner als 3 ist, wird der unqualifizierte Titel vergeben.
Zusammenfassung:
Durch das Erlernen und Verwenden bedingter Rendering-Anweisungen wie v-if, v-show, v-else und v-else-if können wir das Anzeigen und Ausblenden von Komponenten und Elementen basierend auf Bedingungen flexibel steuern. Entsprechend den spezifischen Geschäftsanforderungen kann die Auswahl geeigneter Anweisungen zur Implementierung des bedingten Renderings unseren Code prägnanter und lesbarer machen. Ich hoffe, dass die in diesem Artikel bereitgestellten Codebeispiele Ihnen helfen können, die bedingten Rendering-Techniken von Vue besser zu verstehen und zu verwenden.
Das obige ist der detaillierte Inhalt vonFähigkeiten zum bedingten Rendern von Vue enthüllt: Lernen Sie, v-if, v-show, v-else und v-else-if zu verwenden, um eine flexible Steuerung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!