{#if} {#else if} {#else}
Gengiv markup betinget af JavaScript-udtryk
{#if} {#else if} {#else} er en gratis Sveltejs Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Sveltejs Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Betingede blokke
Sveltes betingelser ligner Handlebars: {#if}, {:else if}, {:else}, afsluttet med {/if}.
Grundlæggende eksempel
Vis den ene eller den anden gren baseret på et boolesk udtryk.
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}Flere grene
Kæd betingelser sammen med {:else if}.
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}Udtryk er JavaScript
Betingelsen kan være et hvilket som helst gyldigt JavaScript-udtryk.
{#if items.length > 0 && !isLoading}Afsluttende tag
Afslut altid med {/if}. Manglende afslutninger giver kompileringsfejl.
Indlejret if
Betingelser kan frit indlejres i andre Svelte-blokke og i HTML.
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}Ingen switch
Svelte har ingen indbygget switch-blok. Brug kædede {:else if}-grene, eller beregn en variabel.
Kombination med each
Du kan omslutte en liste med en betingelse, så den kun gengives, når der findes elementer.
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}Reaktivitet indeni
Betingelsen er reaktiv: Hver gang dens afhængigheder ændrer sig, evaluerer Svelte den igen og skifter gren.
Animationer i if
Du kan knytte transition:-direktiver til elementer i if-blokke for at animere indtræden og afslutning.
Tomme grene
Du kan have en if-blok uden else. Else er valgfri.
Hurtigt tjek
Hvordan afsluttes en Svelte-if-blok?
Opsummering
Brug {#if}/{:else if}/{:else}/{/if} til betinget gengivelse. Udtrykket er almindelig JS.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “{#if} {#else if} {#else}” gratis?
Ja — hele teksten til “{#if} {#else if} {#else}” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Sveltejs Academy-kurset, skal du opgradere til CoddyKit PRO. Sveltejs Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “{#if} {#else if} {#else}”?
Gengiv markup betinget af JavaScript-udtryk Du øver dig i Sveltejs Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Sveltejs Academy?
Der kræves ingen tidligere erfaring. Sveltejs Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “{#if} {#else if} {#else}”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Sveltejs Academy-lektion?
Ja. Alle Sveltejs Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- {#if} {#else if} {#else}
- {#each} med indeks og nøgle
- {#key} til at fremtvinge ny gengivelse
- Indlejrede {#each}-blokke og nøglebaserede opdateringer