javascript / beginner
Snippet
Bedingtes Umschalten des UI-Status mit Svelte If-Else-Blöcken
In Svelte wird der bedingte Kontrollfluss im Markup deklarativ mit {#if}-, {:else}- und {/if}-Blöcken gesteuert. Anstatt imperative DOM-Manipulationen in JavaScript zu schreiben, reagiert das Template automatisch auf Änderungen boolescher Zustandsvariablen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>let isLoggedIn = false;function toggleAuth() {isLoggedIn = !isLoggedIn;}</script><button on:click={toggleAuth}>{isLoggedIn ? 'Log Out' : 'Log In'}</button>{#if isLoggedIn}<p>Welcome back, authorized user!</p>{:else}<p>Please log in to access your dashboard.</p>{/if}
svelte
Erklärung
1
let isLoggedIn = false;
Deklariert eine boolesche Zustandsvariable zur Nachverfolgung des Authentifizierungsstatus.
2
isLoggedIn = !isLoggedIn;
Kehrt den booleschen Wert bei einer Benutzeraktion zwischen true und false um.
3
{#if isLoggedIn}
Öffnet einen Bedingungsblock, der Kindelemente nur rendert, wenn isLoggedIn wahrheitsgemäß ist.
4
{:else}
Definiert einen Fallback-Template-Zweig, wenn die Bedingung als falsch ausgewertet wird.