Svelte if - JavaScript

Svelte if 是 Svelte 框架中的一个指令，可以根据条件动态显示或隐藏 HTML 元素。使用 Svelte if 可以简化条件渲染的代码，提高性能。

语法

Svelte if 的语法结构如下：

{#if condition}
  <p>This text is displayed if the condition is true.</p>
{/if}

其中，condition 为一个 JavaScript 表达式，如果为 true，则显示 <p> 元素中的内容，否则隐藏。

示例

我们假设有一个数据模型：

let isShow = true;

我们可以在 Svelte 的模板中使用 Svelte if 来根据模型中的值决定是否显示一个 HTML 元素：

<script>
  let isShow = true;
</script>

{#if isShow}
  <p>This text is displayed if isShow is true.</p>
{/if}

{#if !isShow}
  <p>This text is displayed if isShow is false.</p>
{/if}

当 isShow 的值为 true 时，只会显示第一个 <p> 元素；当 isShow 的值为 false 时，只会显示第二个 <p> 元素。

注意事项

• 如果使用 else 分支，则需要将它写在 {/if} 的后面。

{#if condition}
  <p>The condition is true.</p>
{:else}
  <p>The condition is false.</p>
{/if}

• Svelte if 可以使用三元运算符来代替。

{condition ? (
  <p>The condition is true.</p>
) : (
  <p>The condition is false.</p>
)}