0Pricing
Sveltejs Academy · Урок

{#if} {#else if} {#else}

Условно отображайте разметку на основе выражений JavaScript

«{#if} {#else if} {#else}» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.

Условные блоки

Условия Svelte похожи на Handlebars: {#if}, {:else if}, {:else}, закрываемые с помощью {/if}.

Базовый пример

Отображайте одну или другую ветвь в зависимости от логического выражения.

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please sign in.</p>
{/if}

Несколько ветвей

Объединяйте условия с помощью {:else if}.

{#if score > 90}
  <p>A</p>
{:else if score > 75}
  <p>B</p>
{:else}
  <p>C</p>
{/if}

Выражения — это JavaScript

Условием может быть любое допустимое выражение JavaScript.

{#if items.length > 0 && !isLoading}

Закрывающий тег

Всегда закрывайте блок с помощью {/if}. Отсутствующий закрывающий тег вызывает ошибку компиляции.

Вложенные if

Условия можно свободно вкладывать в другие блоки Svelte и HTML.

{#if user}
  {#if user.admin}
    <Admin />
  {/if}
{/if}

Блока switch нет

В Svelte нет встроенного блока switch. Используйте цепочку {:else if} или вычисляйте переменную.

Сочетание с each

Список можно обернуть в условие, чтобы отображать его только при наличии элементов.

{#if items.length}
  {#each items as item}<li>{item}</li>{/each}
{/if}

Реактивность внутри блока

Условие реактивно: когда меняются его зависимости, Svelte повторно вычисляет условие и заменяет ветви.

Анимации в if

К элементам внутри блоков if можно добавлять директивы transition:, чтобы анимировать их появление и исчезновение.

Пустые ветви

Блок if может не иметь else. Ветвь else необязательна.

Быстрая проверка

Как закрывается блок if в Svelte?

Итоги

Используйте {#if}/{:else if}/{:else}/{/if} для условной отрисовки. Выражение представляет собой обычный JS.

Часто задаваемые вопросы

Урок «{#if} {#else if} {#else}» бесплатный?

Да — полный текст урока «{#if} {#else if} {#else}» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.

Чему я научусь в уроке «{#if} {#else if} {#else}»?

Условно отображайте разметку на основе выражений JavaScript Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Sveltejs Academy?

Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «{#if} {#else if} {#else}»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Sveltejs Academy?

Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. {#if} {#else if} {#else}
  2. {#each} с индексом и ключом
  3. {#key} для принудительного повторного отображения
  4. Вложенные {#each} и обновления по ключу
← Назад к Sveltejs Academy