Else and else-if blocks in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the {:else} block in Svelte?

The {:else} block runs when the preceding {#if} condition is false. It shows alternative content.

beginner

How do you write an else-if condition in Svelte?

Use {:else if condition} after an {#if} block to check another condition if the first is false.

intermediate

Can you have multiple {:else if} blocks in Svelte?

Yes, you can chain many {:else if} blocks to check multiple conditions in order.

beginner

What happens if none of the {#if} or {:else if} conditions are true and there is no {:else} block?

Nothing is rendered for that conditional block. The UI shows no content from it.

beginner

Show the correct syntax for an if-else-if-else block in Svelte.

{#if condition1}
  
{:else if condition2}
  
{:else}
  
{/if}

In Svelte, which block runs when the {#if} condition is false and no other conditions are true?

A <code>{#if}</code>

B <code>{:else if}</code>

C <code>{:else}</code>

D No block runs automatically

The {:else} block runs when all previous conditions are false.

How do you check a second condition after an {#if} in Svelte?

A Use another <code>{#if}</code> inside the first

B Use <code>{#each}</code>

C Use <code>{:else}</code> with a condition

D Use <code>{:else if condition}</code>

The {:else if condition} block checks another condition if the first is false.

Can you omit the {:else} block in Svelte conditional rendering?

A No, it is required

B Yes, it is optional

C Only if you have <code>{:else if}</code>

D Only if you use <code>{#each}</code>

The {:else} block is optional; if omitted, nothing renders when conditions are false.

What is the correct way to end an if-else block in Svelte?

A <code>{/if}</code>

B <code>{/else}</code>

C <code>{/else if}</code>

D <code>{/endif}</code>

All conditional blocks in Svelte end with {/if}.

Which of these is NOT a valid Svelte conditional block?

A <code>{#switch condition}</code>

B <code>{:else if condition}</code>

C <code>{:else}</code>

D <code>{#if condition}</code>

Svelte does not have a {#switch} block; it uses if, else if, and else.

Explain how to use else and else-if blocks in Svelte to handle multiple conditions.

Think of it like choosing between options in order.

Describe what happens in Svelte when none of the if or else-if conditions are true and there is no else block.

Consider what the user sees on screen.