{#if} {#else if} {#else}
Rendera markup villkorligt baserat på JavaScript-uttryck.
{#if} {#else if} {#else} är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Villkorsblock
Sveltes villkor liknar Handlebars: {#if}, {:else if}, {:else}, som avslutas med {/if}.
Grundläggande exempel
Visa den ena grenen eller den andra beroende på ett booleskt uttryck.
{#if loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please sign in.</p>
{/if}Flera grenar
Bygg en kedja med {:else if} för flera villkor.
{#if score > 90}
<p>A</p>
{:else if score > 75}
<p>B</p>
{:else}
<p>C</p>
{/if}Uttryck är JavaScript
Villkoret kan vara vilket giltigt JavaScript-uttryck som helst.
{#if items.length > 0 && !isLoading}Avslutande tagg
Avsluta alltid med {/if}. Saknade avslutningar ger kompileringsfel.
Kapslade if-block
Villkor kan kapslas fritt i andra Svelte-block och HTML.
{#if user}
{#if user.admin}
<Admin />
{/if}
{/if}Ingen switch
Svelte har inget inbyggt switch-block. Använd en kedja med {:else if} eller beräkna en variabel.
Kombinera med each
Ni kan omsluta en lista med ett villkor för att bara rendera den när det finns objekt.
{#if items.length}
{#each items as item}<li>{item}</li>{/each}
{/if}Reaktivitet inuti
Villkoret är reaktivt: när något av dess beroenden ändras utvärderar Svelte det på nytt och byter gren.
Animationer i if
Ni kan lägga till transition:-direktiv på element inuti if-block för att animera in- och utpassering.
Tomma grenar
Ett if-block kan sakna else. Else är valfritt.
Snabbtest
Hur avslutas ett Svelte-if-block?
Sammanfattning
Använd {#if}/{:else if}/{:else}/{/if} för villkorsstyrd rendering. Uttrycket är vanlig JS.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”{#if} {#else if} {#else}” gratis?
Ja – hela texten till ”{#if} {#else if} {#else}” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”{#if} {#else if} {#else}”?
Rendera markup villkorligt baserat på JavaScript-uttryck. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”{#if} {#else if} {#else}”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- {#if} {#else if} {#else}
- {#each} med index och nyckel
- {#key} för att tvinga fram ny rendering
- Kapslade {#each}-block och nyckelbaserade uppdateringar