{#if} {#else if} {#else}
Rendern Sie Markup bedingt auf Grundlage von JavaScript-Ausdrücken.
{#if} {#else if} {#else} ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Bedingte Blöcke
Svelte-Bedingungen ähneln Handlebars: {#if}, {:else if}, {:else}, abgeschlossen mit {/if}.
Einfaches Beispiel
Zeigen Sie abhängig von einem booleschen Ausdruck den einen oder den anderen Zweig an.
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}Mehrere Zweige
Verketten Sie mehrere Bedingungen mit {:else if}.
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}Ausdrücke sind JavaScript
Die Bedingung kann jeder gültige JavaScript-Ausdruck sein.
{#if items.length > 0 && !isLoading}Schließendes Tag
Schließen Sie immer mit {/if}. Fehlende schließende Tags führen zu Compilerfehlern.
Verschachteltes if
Bedingungen können frei innerhalb anderer Svelte-Blöcke und HTML verschachtelt werden.
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}Kein Switch
Svelte verfügt über keinen integrierten Switch-Block. Verwenden Sie verkettete {:else if}-Zweige oder berechnen Sie eine Variable.
Mit each kombinieren
Sie können eine Liste in eine Bedingung einschließen, damit sie nur gerendert wird, wenn Elemente vorhanden sind.
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}Reaktivität im Inneren
Die Bedingung ist reaktiv: Sobald sich eine ihrer Abhängigkeiten ändert, wertet Svelte sie erneut aus und wechselt den Zweig.
Animationen in if
Sie können Elementen innerhalb von if-Blöcken transition:-Direktiven hinzufügen, um Ein- und Ausblendungen zu animieren.
Leere Zweige
Ein if-Block kann ohne else-Zweig auskommen. Der else-Zweig ist optional.
Kurze Überprüfung
Wie wird ein Svelte-if-Block geschlossen?
Zusammenfassung
Verwenden Sie {#if}/{:else if}/{:else}/{/if} für bedingtes Rendern. Der Ausdruck ist gewöhnliches JS.
Häufig gestellte Fragen
Ist die Lektion „{#if} {#else if} {#else}“ kostenlos?
Ja — der vollständige Text von „{#if} {#else if} {#else}“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „{#if} {#else if} {#else}“?
Rendern Sie Markup bedingt auf Grundlage von JavaScript-Ausdrücken. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „{#if} {#else if} {#else}“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- {#if} {#else if} {#else}
- {#each} mit Index und Schlüssel
- {#key} zum Erzwingen eines erneuten Renderns
- Verschachtelte {#each}-Blöcke und schlüsselbasierte Aktualisierungen