<template> <div> <p v-if="isShow">这是一个v-if指令的示例</p> </div> </template> <script> export default { data() { return { isShow: true } } } </script>
<p>
angezeigt werden soll. Da der Wert von isShow true ist, wird das Element gerendert. <p>
元素。由于isShow的值为true,所以该元素会被渲染。<p>二、v-show指令<template> <div> <p v-show="isShow">这是一个v-show指令的示例</p> </div> </template> <script> export default { data() { return { isShow: true } } } </script>
<p>
元素。由于isShow的值为true,所以该元素会被显示。<p>三、v-else指令<template> <div> <p v-if="isShow">这是一个v-if指令的示例</p> <p v-else>这是一个v-else指令的示例</p> </div> </template> <script> export default { data() { return { isShow: false } } } </script>
<p>
元素。由于isShow的值为false,所以v-if条件不满足,将显示v-else指令后面的<p>
元素。<p>四、v-else-if指令<template> <div> <p v-if="type === 'info'">这是一个信息提示</p> <p v-else-if="type === 'warning'">这是一个警告提示</p> <p v-else-if="type === 'error'">这是一个错误提示</p> <p v-else>这是一个未知提示</p> </div> </template> <script> export default { data() { return { type: 'warning' } } } </script>
<p>
元素。由于type的值为'warning',所以v-else-if指令中的条件被满足,将显示“这是一个警告提示”这个<p>
2. v-show-Anweisung <p> Die v-show-Anweisung ähnelt der v-if-Anweisung. Sie bestimmt auch, ob das Element basierend auf dem Wert des angegebenen Ausdrucks angezeigt wird. Der Unterschied besteht darin, dass die v-show-Anweisung die DOM-Struktur des Elements beibehält und das Anzeigen und Ausblenden des Elements nur über CSS-Stile steuert. <p>
angezeigt werden soll. Da der Wert von isShow true ist, wird das Element angezeigt. 🎜🎜3. v-else-Anweisung 🎜 Die v-else-Anweisung wird verwendet, um einen „else“-Bedingungsblock nach dem vorherigen Element mit v-if oder v-else-if hinzuzufügen. Es hat keinen Ausdruck und kann nur in v-else verwendet werden, um anzugeben, dass das Element gerendert wird, wenn die vorherigen Bedingungen nicht erfüllt sind. 🎜🎜Das Folgende ist ein einfaches Beispiel, das die Verwendung der v-else-Direktive demonstriert: 🎜rrreee🎜Im obigen Code entscheiden wir basierend auf dem Wert von isShow, welches <p>
-Element angezeigt werden soll. Da der Wert von isShow falsch ist, ist die v-if-Bedingung nicht erfüllt und das <p>
-Element, das der v-else-Direktive folgt, wird angezeigt. 🎜🎜4. v-else-if-Anweisung 🎜 Die v-else-if-Anweisung wird verwendet, um einen „else if“-Bedingungsblock nach der v-if- oder v-else-if-Anweisung hinzuzufügen. Es empfängt einen Ausdruck und bestimmt anhand des Werts des Ausdrucks, ob das Element gerendert werden soll. 🎜🎜Das Folgende ist ein einfaches Beispiel, das die Verwendung der v-else-if-Direktive demonstriert: 🎜rrreee🎜Im obigen Code bestimmen wir basierend auf dem Wert, welches <p>
-Element angezeigt werden soll vom Typ . Da der Wert des Typs „Warnung“ ist, ist die Bedingung in der v-else-if-Direktive erfüllt und das <p>
-Element „Dies ist eine Warnmeldung“ wird angezeigt. 🎜🎜Zusammenfassung: 🎜v-if, v-show, v-else und v-else-if sind in Vue häufig verwendete bedingte Rendering-Anweisungen, mit denen wir Elemente dynamisch ein- oder ausblenden können. In einigen spezifischen Szenarien können wir basierend auf den Bedingungen auswählen, welche Anweisung verwendet werden soll. Das Beherrschen dieser Anweisungen ist für Entwickler, die neu bei Vue sind, sehr wichtig. Durch die spezifischen Codebeispiele in diesem Artikel können Anfänger diese Anweisungen besser verstehen und anwenden und so ihre Vue-Entwicklungsfähigkeiten verbessern. 🎜Das obige ist der detaillierte Inhalt vonGrundlegende Fähigkeiten für Anfänger zum Erlernen von Vue: Beherrschen Sie das bedingte Rendern von v-if, v-show, v-else und v-else-if. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!