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}