javascript / beginner
Snippet
Conditional Rendering with If/Else
Svelte uses logic blocks like {#if} to show or hide parts of the UI based on a condition. The {:else} block provides an alternative if the condition is false.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>let visible = true;</script>{#if visible}<p>Now you see me!</p>{:else}<p>Now you don't!</p>{/if}<button on:click={() => visible = !visible}>Toggle</button>
svelte
Breakdown
1
{#if visible}
Checks if the 'visible' variable is true.
2
{:else}
Handles the case where the condition above was not met.