File tree 9 files changed +60
-99
lines changed
content/tutorial/01-svelte/04-logic
9 files changed +60
-99
lines changed Original file line number Diff line number Diff line change @@ -4,21 +4,18 @@ title: If blocks
4
4
5
5
HTML doesn't have a way of expressing _ logic_ , like conditionals and loops. Svelte does.
6
6
7
- To conditionally render some markup, we wrap it in an ` if ` block:
7
+ To conditionally render some markup, we wrap it in an ` if ` block. Let's add some text that appears when ` count ` is greater than ` 10 ` :
8
8
9
9
``` svelte
10
10
/// file: App.svelte
11
- +++{#if user.loggedIn}+++
12
- <button on:click={toggle}>
13
- Log out
14
- </button>
15
- +++{/if}+++
11
+ <button on:click={increment}>
12
+ Clicked {count}
13
+ {count === 1 ? 'time' : 'times'}
14
+ </button>
16
15
17
- +++{#if !user.loggedIn}+++
18
- <button on:click={toggle}>
19
- Log in
20
- </button>
21
- +++{/if}+++
16
+ +++{#if count > 10}
17
+ <p>{count} is greater than 10</p>
18
+ {/if}+++
22
19
```
23
20
24
21
Try it — update the component, and click on the buttons.
Original file line number Diff line number Diff line change 1
1
<script >
2
- let user = { loggedIn : false } ;
2
+ let count = 0 ;
3
3
4
- function toggle () {
5
- user . loggedIn = ! user . loggedIn ;
4
+ function increment () {
5
+ count += 1 ;
6
6
}
7
7
</script >
8
8
9
- <button on:click ={toggle }>
10
- Log out
11
- </button >
12
-
13
- <button on:click ={toggle }>
14
- Log in
9
+ <button on:click ={increment }>
10
+ Clicked {count }
11
+ {count === 1 ? ' time' : ' times' }
15
12
</button >
Original file line number Diff line number Diff line change 1
1
<script >
2
- let user = { loggedIn : false } ;
2
+ let count = 0 ;
3
3
4
- function toggle () {
5
- user . loggedIn = ! user . loggedIn ;
4
+ function increment () {
5
+ count += 1 ;
6
6
}
7
7
</script >
8
8
9
- {#if user .loggedIn }
10
- <button on:click ={toggle }>
11
- Log out
12
- </button >
13
- {/if }
9
+ <button on:click ={increment }>
10
+ Clicked {count }
11
+ {count === 1 ? ' time' : ' times' }
12
+ </button >
14
13
15
- {#if ! user .loggedIn }
16
- <button on:click ={toggle }>
17
- Log in
18
- </button >
19
- {/if }
14
+ {#if count > 10 }
15
+ <p >{count } is greater than 10</p >
16
+ {/if }
Original file line number Diff line number Diff line change 2
2
title : Else blocks
3
3
---
4
4
5
- Since the two conditions — ` if user.loggedIn ` and ` if !user.loggedIn ` — are mutually exclusive, we can simplify this component slightly by using an ` else ` block:
5
+ Just like in JavaScript, an ` if ` block can have an ` else ` block:
6
6
7
7
``` svelte
8
8
/// file: App.svelte
9
- {#if user.loggedIn}
10
- <button on:click={toggle}>
11
- Log out
12
- </button>
13
- +++{:else}+++
14
- <button on:click={toggle}>
15
- Log in
16
- </button>
9
+ {#if count > 10}
10
+ <p>{count} is greater than 10</p>
11
+ +++{:else}
12
+ <p>{count} is between 0 and 10</p>+++
17
13
{/if}
18
14
```
19
15
Load Diff This file was deleted.
Original file line number Diff line number Diff line change 1
1
<script >
2
- let user = { loggedIn : false } ;
2
+ let count = 0 ;
3
3
4
- function toggle () {
5
- user . loggedIn = ! user . loggedIn ;
4
+ function increment () {
5
+ count += 1 ;
6
6
}
7
7
</script >
8
8
9
- {#if user .loggedIn }
10
- <button on:click ={toggle }>
11
- Log out
12
- </button >
9
+ <button on:click ={increment }>
10
+ Clicked {count }
11
+ {count === 1 ? ' time' : ' times' }
12
+ </button >
13
+
14
+ {#if count > 10 }
15
+ <p >{count } is greater than 10</p >
13
16
{:else }
14
- <button on:click ={toggle }>
15
- Log in
16
- </button >
17
- {/if }
17
+ <p >{count } is between 0 and 10</p >
18
+ {/if }
Original file line number Diff line number Diff line change @@ -6,11 +6,11 @@ Multiple conditions can be 'chained' together with `else if`:
6
6
7
7
``` svelte
8
8
/// file: App.svelte
9
- {#if x > 10}
10
- <p>{x } is greater than 10</p>
11
- {: +++else if+++ x < 5}
12
- <p>{x } is less than 5</p>
9
+ {#if count > 10}
10
+ <p>{count } is greater than 10</p>
11
+ +++{: else if count < 5}
12
+ <p>{count } is less than 5</p>+++
13
13
{:else}
14
- <p>{x } is between 5 and 10</p>
14
+ <p>{count } is between +++5+++ and 10</p>
15
15
{/if}
16
16
```
Load Diff This file was deleted.
Original file line number Diff line number Diff line change 1
1
<script >
2
- let x = 0 ;
2
+ let count = 0 ;
3
+
4
+ function increment () {
5
+ count += 1 ;
6
+ }
3
7
</script >
4
8
5
- <button on:click ={() => x += 1 }>+1</button >
9
+ <button on:click ={increment }>
10
+ Clicked {count }
11
+ {count === 1 ? ' time' : ' times' }
12
+ </button >
6
13
7
- {#if x > 10 }
8
- <p >{x } is greater than 10</p >
9
- {:else if x < 5 }
10
- <p >{x } is less than 5</p >
14
+ {#if count > 10 }
15
+ <p >{count } is greater than 10</p >
16
+ {:else if count < 5 }
17
+ <p >{count } is less than 5</p >
11
18
{:else }
12
- <p >{x } is between 5 and 10</p >
19
+ <p >{count } is between 5 and 10</p >
13
20
{/if }
You can’t perform that action at this time.
0 commit comments