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

Пользователь

от wilburn , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от linnea , год назад

@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.

Пользователь

от lilla.herman , 3 месяца назад

@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 помогут вам создавать более динамичные и интерактивные компоненты.