Basic Svelte
Introduction
Bindings
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
HTML doesn’t have a way of expressing logic, like conditionals and loops. Svelte does.
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
:
App
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>
{#if count > 10}
<p>{count} is greater than 10</p>
{/if}
Try it — update the component, and click on the button a few times.
previous next
1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
let count = $state(0);
function increment() {
count += 1;
}
</script>
<button onclick={increment}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>