Skip to content

Commit 801bf8c

Browse files
author
Rich Harris
committed
more coherent if block examples
1 parent 45345d7 commit 801bf8c

File tree

9 files changed

+60
-99
lines changed

9 files changed

+60
-99
lines changed

content/tutorial/01-svelte/04-logic/01-if-blocks/README.md

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,18 @@ title: If blocks
44

55
HTML doesn't have a way of expressing _logic_, like conditionals and loops. Svelte does.
66

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`:
88

99
```svelte
1010
/// 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>
1615
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}+++
2219
```
2320

2421
Try it — update the component, and click on the buttons.
Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,12 @@
11
<script>
2-
let user = { loggedIn: false };
2+
let count = 0;
33
4-
function toggle() {
5-
user.loggedIn = !user.loggedIn;
4+
function increment() {
5+
count += 1;
66
}
77
</script>
88

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'}
1512
</button>
Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
<script>
2-
let user = { loggedIn: false };
2+
let count = 0;
33
4-
function toggle() {
5-
user.loggedIn = !user.loggedIn;
4+
function increment() {
5+
count += 1;
66
}
77
</script>
88

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>
1413

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}

content/tutorial/01-svelte/04-logic/02-else-blocks/README.md

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,14 @@
22
title: Else blocks
33
---
44

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:
66

77
```svelte
88
/// 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>+++
1713
{/if}
1814
```
1915

content/tutorial/01-svelte/04-logic/02-else-blocks/app-a/src/lib/App.svelte

Lines changed: 0 additions & 19 deletions
This file was deleted.
Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<script>
2-
let user = { loggedIn: false };
2+
let count = 0;
33
4-
function toggle() {
5-
user.loggedIn = !user.loggedIn;
4+
function increment() {
5+
count += 1;
66
}
77
</script>
88

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>
1316
{:else}
14-
<button on:click={toggle}>
15-
Log in
16-
</button>
17-
{/if}
17+
<p>{count} is between 0 and 10</p>
18+
{/if}

content/tutorial/01-svelte/04-logic/03-else-if-blocks/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@ Multiple conditions can be 'chained' together with `else if`:
66

77
```svelte
88
/// 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>+++
1313
{:else}
14-
<p>{x} is between 5 and 10</p>
14+
<p>{count} is between +++5+++ and 10</p>
1515
{/if}
1616
```

content/tutorial/01-svelte/04-logic/03-else-if-blocks/app-a/src/lib/App.svelte

Lines changed: 0 additions & 15 deletions
This file was deleted.
Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<script>
2-
let x = 0;
2+
let count = 0;
3+
4+
function increment() {
5+
count += 1;
6+
}
37
</script>
48

5-
<button on:click={() => x += 1}>+1</button>
9+
<button on:click={increment}>
10+
Clicked {count}
11+
{count === 1 ? 'time' : 'times'}
12+
</button>
613

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>
1118
{:else}
12-
<p>{x} is between 5 and 10</p>
19+
<p>{count} is between 5 and 10</p>
1320
{/if}

0 commit comments

Comments
 (0)