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>