SvelteTemplate syntax

{#if ...}

{#if expression}...{/if}

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

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

条件付きでレンダリングされるコンテンツは、if ブロックで囲むことができます。

{#if answer === 42}
	<p>what was the question?</p>
{/if}

{:else if expression} を使用して追加の条件を指定することができ、{:else} 句で終わらせることもできます。

{#if porridge.temperature > 100}
	<p>too hot!</p>
{:else if 80 > porridge.temperature}
	<p>too cold!</p>
{:else}
	<p>just right!</p>
{/if}

(ブロックは要素を囲む必要はなく、要素内のテキストを囲むこともできます。)

previous next