苗条的模板:条件逻辑

了解如何在Svelte中使用模板,尤其是如何使用条件句

Web上任何好的模板语言都至少提供两件事:条件结构和循环。

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}

免费下载我的苗条手册


更多精妙的教程: