Multiple conditions can be 'chained' together with else if
:
{#if x > 10}
<p>{x} is greater than 10</p>
{:else if 5 > x}
<p>{x} is less than 5</p>
{:else}
<p>{x} is between 5 and 10</p>
{/if}
App.svelte
xxxxxxxxxx
13
1
<script>
2
let x = 7;
3
</script>
4
5
{#if x > 10}
6
<p>{x} is greater than 10</p>
7
{:else}
8
{#if 5 > x}
9
<p>{x} is less than 5</p>
10
{:else}
11
<p>{x} is between 5 and 10</p>
12
{/if}
13
{/if}
Console
xxxxxxxxxx
111
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
detach,
5
element,
6
empty,
7
init,
8
insert,
9
noop,
10
safe_not_equal
11
} from "svelte/internal";
12
13
function create_else_block(ctx) {
14
let p;
15
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */