Svelte: If-blokker

I JavaScript bruker vi if(betingelse) for å kjøre forskjellig kode i dataverden.

I Svelte bruker vi {#if betingelse } for å bestemme hva som skal vises av HTML i brukergrensesnittet basert på logikk i dataverden (JavaScript). Vi må avslutte blokken med {/if}.

betingelse refererer til boolske uttrykk eller variabler i dataverden, dvs. JavaScript som står i <script>.

Dette lar oss skjule eller vise elementer basert på utrykk eller variabler.

På denne måten kan vi også vise elementer med ulik css stilsetting basert på betingelser.

1. Skjule og vise elementer

Vi bruker {#if} for å sjekke om noe er sant. Hvis det er sant, vises HTML-koden inni blokken.

🕵️ Dette er en hemmelig beskjed!

{#if visible}
<p>Dette er en hemmelig beskjed!</p>
{/if}

3. Flere valg (Else If)

Hvis vi har flere enn to alternativer, bruker vi {:else if ...}.

Score: 0

👎 Prøv igjen.

{#if score >= 80}
<p>Fantastisk bra!</p>
{:else if score >= 40}
<p>Helt greit.</p>
{:else}
<p>Prøv igjen.</p>
{/if}

2. If / Else

Med {:else} kan vi vise noe annet hvis betingelsen ikke er sann.

{#if loggedIn}
<h1>Velkommen tilbake!</h1>
{:else}
<button>Logg inn</button>
{/if}

4. Ulik stil med CSS

Vi kan vise to helt forskjellige p-elementer med ulike CSS-klasser basert på en betingelse.

✅ Alt fungerer som det skal.

{#if hasError}
<p class="error">Noe gikk galt!</p>
{:else}
<p class="success">Alt fungerer.</p>
{/if}