Шаблоны Svelte: условная логика

Узнайте, как работать с шаблонами в Svelte и, в частности, как использовать условные выражения

Любой хороший язык шаблонов для Интернета предоставляет вам как минимум две вещи: условную структуру и цикл.

Svelte не исключение, и в этом посте я рассмотрю условные структуры.

Вы хотите иметь возможность смотреть на значение / выражение, и если оно указывает на истинное значение, сделайте что-нибудь, если оно указывает на ложное значение, тогда сделайте что-нибудь еще.

Svelte предоставляет нам очень мощный набор управляющих структур.

Первый - этоесли:

{#if isRed}
	<p>Red</p>
{/if}

Есть открытие{#if}и окончание{/if}. Вступительная разметка проверяет достоверность значения или оператора. В этом случаеisRedможет быть логическим сtrueценить:

<script>
let isRed = true
</script>

Пустая строка является ложной, но строка с некоторым содержанием является истинной.

0 - ложь, но число> 0 - истинно.

Логическое значениеtrueправда, конечно, иfalseложь.

Если начальная разметка не удовлетворена (указано ложное значение), то ничего не происходит.

Чтобы сделать что-то еще, если нас не устраивает, мы используем соответственно названныйelseутверждение:

{#if isRed}
	<p>Red</p>
{:else}
	<p>Not red</p>
{/if}

В шаблоне отображается либо первый блок, либо второй. Другого выхода нет.

Вы можете использовать любое выражение JavaScript вifусловие блока, поэтому вы можете отменить параметр, используя!оператор:

{#if !isRed}
	<p>Not red</p>
{:else}
	<p>Red</p>
{/if}

Теперь внутриelseвы можете проверить наличие дополнительных условий. Вот где{:else if somethingElse}появляется синтаксис:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else}
  <p>Not red nor green</p>
{/if}

У вас может быть много таких блоков, а не один, и вы можете вкладывать их друг в друга. Вот более сложный пример:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else if isBlue}
  <p>It is blue</p>
{:else}
  {#if isDog}
    <p>It is a dog</p>
  {/if}
{/if}

Скачать мою бесплатнуюСправочник Svelte


Более стройные уроки: