Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
Any good templating language for the Web provides you at least 2 things: a conditional structure, and a loop.
Svelte is no exception, and in this post I’ll look into conditional structures.
You want to be able to look at a value/expression, and if that points to a true value do something, if that points to a false value then do something else.
Svelte provides us a very powerful set of control structures.
The first is if:
{#if isRed}
<p>Red</p>
{/if}
There is an opening {#if}
and an ending {/if}
. The opening markup checks for a value or statement to be truthy. In this case isRed
can be a boolean with a true
value:
<script>
let isRed = true
</script>
An empty string is falsy, but a string with some content is truthy.
0 is falsy, but a number > 0 is truthy.
The boolean value true
is truthy, of course, and false
is falsy.
If the opening markup is not satisfied (a falsy value is provided), then nothing happens.
To do something else if that’s not satisfied, we use the appropriately called else
statement:
{#if isRed}
<p>Red</p>
{:else}
<p>Not red</p>
{/if}
Either the first block is rendered in the template, or the second one. There’s no other option.
You can use any JavaScript expression into the if
block condition, so you can negate an option using the !
operator:
{#if !isRed}
<p>Not red</p>
{:else}
<p>Red</p>
{/if}
Now, inside the else
you might want to check for an additional condition. That’s where the {:else if somethingElse}
syntax comes along:
{#if isRed}
<p>Red</p>
{:else if isGreen}
<p>Green</p>
{:else}
<p>Not red nor green</p>
{/if}
You can have many of these blocks, not just one, and you can nest them. Here’s a more complex example:
{#if isRed}
<p>Red</p>
{:else if isGreen}
<p>Green</p>
{:else if isBlue}
<p>It is blue</p>
{:else}
{#if isDog}
<p>It is a dog</p>
{/if}
{/if}
Download my free Svelte Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More svelte tutorials:
- Getting started with Svelte - a short tutorial
- How to work with props in Svelte
- How to import components in Svelte
- How to export functions and variables from a Svelte component
- Svelte templates: conditional logic
- How to rerender a Svelte component on demand
- Svelte Slots
- How to add comments in Svelte templates
- Svelte Bindings
- Handling State Updates in Svelte
- Reactive Statements in Svelte
- Svelte Lifecycle Events
- Svelte templates: loops
- Resolve promises in Svelte templates
- Working with events in Svelte
- Cross-component State Management in Svelte
- How to access a URL parameter in Sapper outside of script module
- How to dynamically apply CSS in Svelte
- How to redirect to a URL in Sapper
- How to simulate a for loop in Svelte templates