Svelte Template

{#if...}

2025-06-10

{#if...} 是 [[Svelte]] 中的条件语句，可以实现条件渲染。

语法

1
{#if expression}...{/if}
2

3
{#if expression}...{:else}...{/if}
4

5
{#if expression}...{:else if expression}...{/if}

所有条件都是由 {#if} 开启，{/if} 关闭；{:else} 和 {:else if} 都是用冒号 : 前缀。

使用

if

1
{#if count > 10 }
2
  <p>{count} is greater than 10</p>
3
{/if}

if..else

1
{#if count > 10}
2
  <p>{count} is greater than 10</p>
3
{:else}
4
  <p>{count} is between 0 and 10</p>
5
{/if}

else if

1
{#if count > 10}
2
  <p>{count} is greater than 10</p>
3
{:else if count < 5}
4
  <p>{count} is less than 5</p>
5
{:else}
6
  <p>{count} is between 0 and 10</p>
7
{/if}