Svelte模板：條件邏輯

學習如何在Svelte中使用模板，特別是如何使用條件語句。

任何一個好的Web模板語言都至少提供了兩樣東西：條件結構和循環。

Svelte也不例外，在本篇文章中，我將介紹條件結構。

您希望能夠查看一個值/表達式，如果它指向一個真值，則執行某些操作；如果它指向一個假值，則執行其他操作。

Svelte提供了一組非常強大的控制結構。

首先是if：

{#if isRed}
 <p>紅色</p>
{/if}

有一個開始標記{#if}和一個結束標記{/if}。開始標記檢查一個值或語句是否為真值。在這個例子中，isRed可以是一個具有true值的布爾值：

<script>
let isRed = true
</script>

一個空字符串是假值，但帶有內容的字符串是真值。

0是假值，但大於0的數字是真值。

布爾值true是真值，當然，false是假值。

如果開始標記的條件不滿足（提供了一個假值），則不會發生任何事情。

如果條件不滿足，需要執行其他操作，我們可以使用適當命名的else語句：

{#if isRed}
 <p>紅色</p>
{:else}
 <p>不是紅色</p>
{/if}

在模板中，要麼渲染第一個代碼塊，要麼渲染第二個代碼塊。沒有其他選項。

您可以在if塊條件中使用任何JavaScript表達式，因此可以使用!運算符對一個選項進行取反：

{#if !isRed}
 <p>不是紅色</p>
{:else}
 <p>紅色</p>
{/if}

現在，在else內部，您可能還想檢查其他條件。這就是{:else if somethingElse}語法的用法：

{#if isRed}
 <p>紅色</p>
{:else if isGreen}
 <p>綠色</p>
{:else}
 <p>既不是紅色也不是綠色</p>
{/if}

您可以擁有多個這樣的代碼塊，不僅僅是一個，並且可以對它們進行嵌套。以下是一個更複雜的示例：

{#if isRed}
 <p>紅色</p>
{:else if isGreen}
 <p>綠色</p>
{:else if isBlue}
 <p>它是藍色</p>
{:else}
 {#if isDog}
 <p>它是一隻狗</p>
 {/if}
{/if}