javascript / beginner
Snippet
Bedingte UI-Elemente mit Svelte If-Else-Blöcken darstellen
Svelte bietet bedingte Kontrollstrukturen direkt im Template mittels `{#if}`- und `{:else}`-Blöcken. Sobald sich der Wert der Bedingung ändert, fügt Svelte die entsprechenden DOM-Elemente automatisch ein oder entfernt sie.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>let isLoggedIn = false;function toggleLogin() {isLoggedIn = !isLoggedIn;}</script>{#if isLoggedIn}<p>Welcome back, user!</p><button on:click={toggleLogin}>Log Out</button>{:else}<p>Please log in to continue.</p><button on:click={toggleLogin}>Log In</button>{/if}
svelte
Erklärung
1
let isLoggedIn = false;
Deklariert eine reaktive boolesche Variable zur Verfolgung des Anmeldestatus.
2
{#if isLoggedIn}
Öffnet einen bedingten Template-Block, der gerendert wird, wenn isLoggedIn wahr ist.
3
{:else}
Definiert den Fallback-Zweig, der gerendert wird, wenn die Bedingung falsch ist.
4
{/if}
Schließt den bedingten Template-Block ab.