Detaillierte Erläuterung des bedingten Renderings von Vue.j

Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung des bedingten Renderings von Vue.js. In String-Vorlagen, wie z. B. Handlers, müssen wir einen bedingten Block wie diesen schreiben:

<!-- Handlebars 模板 -->{{#if ok}}
    <h1>Yes</h1>{{/if}}

In Vue verwenden wir die v-if-Direktive, um die gleiche Funktion zu erreichen:

<h1 v-if="ok">Yes</h1>

Sie können auch v-else verwenden, um einen „else-Block“ hinzuzufügen:

<h1 v-if="ok">Yes</h1>
No

# Verwenden Sie d477f9ce7bf77f53fbcf36bec1b69b7a bedingte Rendering-Gruppierung für v-if-Elemente.

Da v-if eine Direktive ist, muss sie einem Element hinzugefügt werden. Was aber, wenn Sie mehrere Elemente austauschen möchten? Zu diesem Zeitpunkt können Sie ein d477f9ce7bf77f53fbcf36bec1b69b7a-Element als unsichtbares Umhüllungselement behandeln und v-if darauf verwenden. Das endgültige Rendering-Ergebnis wird ohne d477f9ce7bf77f53fbcf36bec1b69b7a-Elemente sein.

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

var vm = new Vue({
    el: '#example',    data: {
        ok: true
    }
})

# v-else und v-else-if

können durch die v-else-Direktive dargestellt werden, um den „else-Block“ von : v-if

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

-Element muss unmittelbar auf das Element mit

oder v-else folgen, sonst wird es nicht erkannt. v-ifv-else-if Ähnlich wie

muss auch

einem Element mit v-else oder v-else-if folgen. v-ifv-else-ifv-show

Eine weitere Option zum Anzeigen von Elementen basierend auf Bedingungen ist die

-Direktive. Der Unterschied zu

v-show

besteht darin, dass Elemente mit

<h1 v-show="ok">Hello!</h1>

immer gerendert werden und im DOM verbleiben.

Schalten Sie einfach die CSS-Eigenschaftsanzeige des Elements um. v-showv-show

Beachten Sie, dass

weder das Element noch v-show unterstützt. d477f9ce7bf77f53fbcf36bec1b69b7av-elsev-if vs v-show

ist „echtes“ bedingtes Rendering, da es sicherstellt, dass Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks während des Wechsels ordnungsgemäß zerstört und neu erstellt werden.

v-if

ist auch faul: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – der bedingte Block wird erst gerendert, wenn die Bedingung zum ersten Mal wahr wird.

v-if Im Gegensatz dazu ist

viel einfacher – das Element wird unabhängig von den Anfangsbedingungen immer gerendert und einfach basierend auf CSS umgeschaltet.

v-show Im Allgemeinen hat

einen höheren Switching-Overhead, während

einen höheren anfänglichen Rendering-Overhead hat. Daher ist es besser, v-if zu verwenden, wenn Sie sehr häufig wechseln müssen; wenn sich die Bedingungen zur Laufzeit selten ändern, ist es besser, v-show zu verwenden. v-showv-ifv-if

In String-Vorlagen wie „Lenkers“ müssen wir einen bedingten Block wie diesen schreiben:

In Vue verwenden wir

<!-- Handlebars 模板 -->{{#if ok}}
    <h1>Yes</h1>{{/if}}

Die Direktive erreicht die gleiche Funktion:

v-if

Sie können auch

<h1 v-if="ok">Yes</h1>

verwenden, um einen „else-Block“ hinzuzufügen:

v-else

<h1 v-if="ok">Yes</h1>
No

# Verwenden Sie Element 🎜> Bedingte Rendering-Gruppierung d477f9ce7bf77f53fbcf36bec1b69b7av-ifDa eine Direktive ist, muss sie einem Element hinzugefügt werden. Was aber, wenn Sie mehrere Elemente austauschen möchten? Zu diesem Zeitpunkt können Sie ein -Element

als unsichtbares Umhüllungselement v-if behandeln und d477f9ce7bf77f53fbcf36bec1b69b7a darauf verwenden. Das endgültige Rendering-Ergebnis ist ohne v-if-Elemente. d477f9ce7bf77f53fbcf36bec1b69b7a

<p id="example">
    <template v-if=&#39;ok&#39;>
        <h1>Title</h1>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
    </template></p>

#

var vm = new Vue({
    el: '#example',    data: {
        ok: true
    }
})

und

v-elsev-else-if können durch die -Direktive dargestellt werden, um den „else-Block“ von :

v-elsev-if-Element muss unmittelbar auf das Element mit

oder

<p v-if="Math.random() > 0.5">
    Now you see me</p>
<p v-else>
    Now you don&#39;t
</p>

folgen, sonst wird es nicht erkannt.

<p v-if="type === &#39;A&#39;">
    A
</p>
<p v-else-if="type === &#39;B&#39;">
    B
</p>
<p v-else-if="type === &#39;C&#39;">
    C
</p>
<p v-else>
    Not A/B/C
</p>

Ähnlich wie v-else muss auch v-if einem Element mit v-else-if oder

folgen.

v-elsev-showv-else-ifv-ifEine weitere Option zum Anzeigen von Elementen basierend auf Bedingungen ist die v-else-if-Direktive.

Der Unterschied besteht darin, dass Elemente mit

immer gerendert werden und im DOM verbleiben. v-show Schalten Sie einfach die CSS-Eigenschaftsanzeige des Elements um.

<h1 v-show="ok">Hello!</h1>

Beachten Sie, dass v-show weder das Element v-show noch

unterstützt.

v-showv-if vs v-showd477f9ce7bf77f53fbcf36bec1b69b7av-else ist „echtes“ bedingtes Rendering, da es sicherstellt, dass Ereignis-Listener und Unterkomponenten innerhalb des bedingten Blocks während des Wechsels ordnungsgemäß zerstört und neu erstellt werden.

ist auch faul: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen – der bedingte Block wird erst gerendert, wenn die Bedingung zum ersten Mal wahr wird.

v-if Im Gegensatz dazu ist

viel einfacher – das Element wird unabhängig von den Anfangsbedingungen immer gerendert und einfach basierend auf CSS umgeschaltet.

Im Allgemeinen hat v-if einen höheren Switching-Overhead, während v-show einen höheren anfänglichen Rendering-Overhead hat. Daher ist es besser, v-show zu verwenden, wenn Sie sehr häufig wechseln müssen. Wenn sich die Bedingungen zur Laufzeit selten ändern, ist es besser, v-if zu verwenden.

Verwandte Empfehlungen:

Vue.js – Bedingtes Rendering

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des bedingten Renderings von Vue.j. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!