mirror of https://github.com/sveltejs/svelte
41 lines
736 B
41 lines
736 B
5 months ago
|
---
|
||
|
|
title: {#if ...}
|
||
|
|
---
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
{#if expression}...{/if}
|
||
|
|
```
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
{#if expression}...{:else if expression}...{/if}
|
||
|
|
```
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
<!--- copy: false --->
|
||
|
|
{#if expression}...{:else}...{/if}
|
||
|
|
```
|
||
|
|
|
||
|
|
Content that is conditionally rendered can be wrapped in an if block.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
{#if answer === 42}
|
||
|
|
<p>what was the question?</p>
|
||
|
|
{/if}
|
||
|
|
```
|
||
|
|
|
||
|
|
Additional conditions can be added with `{:else if expression}`, optionally ending in an `{:else}` clause.
|
||
|
|
|
||
|
|
```svelte
|
||
|
|
{#if porridge.temperature > 100}
|
||
|
|
<p>too hot!</p>
|
||
|
|
{:else if 80 > porridge.temperature}
|
||
|
|
<p>too cold!</p>
|
||
|
|
{:else}
|
||
|
|
<p>just right!</p>
|
||
|
|
{/if}
|
||
|
|
```
|
||
|
|
|
||
|
|
(Blocks don't have to wrap elements, they can also wrap text within elements.)
|