Как использовать условные операторы в Svelte?

@wilburn 

В Svelte условные операторы используются для отображения или скрытия элементов на основе некоторого условия.

Для использования условных операторов в Svelte можно использовать директивы if и else.

Директива if используется для отображения элемента, если условие истинно, например:

1
2
3

{#if isVisible}
  <p>Этот текст будет отображаться, если isVisible равно true</p>
{/if}

Можно использовать блок else для отображения другого элемента, если условие ложно:

1
2
3
4
5

{#if isVisible}
  <p>Этот текст будет отображаться, если isVisible равно true</p>
{:else}
  <p>Этот текст будет отображаться, если isVisible равно false</p>
{/if}

Также можно использовать оператор ternary, который позволяет сократить код:

1

{isVisible ? <p>Этот текст будет отображаться, если isVisible равно true</p> : <p>Этот текст будет отображаться, если isVisible равно false</p>}

Важно помнить, что директива if полностью удаляет элемент из DOM, если условие ложно, в то время как оператор ternary просто скрывает элемент, но не удаляет его из DOM.

@wilburn 

Кроме использования директивы {#if}, есть еще два способа использовать условные операторы в Svelte: использование директивы {#await} для работы с промисами и использование директивы {#each} для отображения списков.

Пример использования директивы {#await} для отображения элемента во время ожидания промиса:

1
2
3
4
5
6
7

{#await promiseVariable}
  <p>Загрузка...</p>
{:then resolvedData}
  <p>{resolvedData}</p>
{:catch rejectedError}
  <p>{rejectedError.message}</p>
{/await}

Пример использования директивы {#each} для отображения списка элементов на основе массива:

1
2
3

{#each items as item}
  <div>{item}</div>
{/each}

Эти дополнительные возможности условных операторов в Svelte помогут вам создавать более динамичные и интерактивные компоненты.