Условия: блок if

Часто часть страницы нужно показывать только при каком-то условии: сообщение «Список пуст», кнопку для вошедшего пользователя, ошибку формы. В разметке Svelte для этого есть блок {#if}.

Блок if

Блок открывается тегом {#if условие} и закрывается {/if}:

<!-- src/routes/+page.svelte -->
<script>
  let todos = $state([]);
</script>
 
{#if todos.length === 0}
  <p>Список пуст. Добавьте первую задачу.</p>
{/if}
 
<button onclick={() => todos.push({ id: Date.now(), text: 'Новая', done: false })}>
  Добавить
</button>

Пока задач нет, на странице видна подсказка. После клика по «Добавить» условие становится ложным, и абзац исчезает из DOM — он не скрывается стилем, а удаляется полностью.

Ветка else

Для второго варианта добавьте :

<script>
  let todos = $state([]);
</script>
 
{#if todos.length === 0}
  <p>Список пуст.</p>
{:else}
  <p>Задач в списке: {todos.length}</p>
{/if}

На странице всегда виден ровно один из двух абзацев.

Несколько условий

Ветка {:else if ...} проверяет следующее условие, если предыдущие не подошли:

<script>
  let todos = $state([
    { id: 1, text: 'Купить хлеб', done: true },
    { id: 2, text: 'Позвонить Олегу', done: false }
  ]);
  let remaining = $derived(todos.filter((todo) => !todo.done).length);
</script>
 
{#if todos.length === 0}
  <p>Список пуст.</p>
{:else if remaining === 0}
  <p>Всё сделано!</p>
{:else}
  <p>Осталось: {remaining}</p>
{/if}

Сейчас страница покажет «Осталось: 1». Отметьте вторую задачу выполненной — текст сменится на «Всё сделано!».

Синтаксис блоков

Тот же порядок символов встретится в блоках each и await.

Короткие условия

Для простого случая можно обойтись выражением: {remaining > 0 ? 'Есть дела' : 'Свободен'}. Блок {#if} нужен, когда в зависимости от условия меняется разметка, а не только текст.

Частая ошибка

Писать else без двоеточия или забыть закрыть блок:

<script>
  let ok = $state(true);
</script>
 
{#if ok}
  <p>Да</p>
{else}
  <p>Нет</p>

Компилятор сообщит об ошибке. Правильно — внутри блока и обязательный {/if} в конце.