Skip to main content

Part 1 / Logic / Else-if blocks

Multiple conditions can be 'chained' together with else if:

App.svelte
{#if x > 10}
	<p>{x} is greater than 10</p>
{:else if x < 5}
	<p>{x} is less than 5</p>
{:else}
	<p>{x} is between 5 and 10</p>
{/if}

Next: Each blocks

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
	let x = 0;
</script>
 
<button on:click={() => x += 1}>+1</button>
 
{#if x > 10}
	<p>{x} is greater than 10</p>
{:else}
	{#if x < 5}
		<p>{x} is less than 5</p>
	{:else}
		<p>{x} is between 5 and 10</p>
	{/if}
{/if}
initialising