Skip to main content

HTML には条件式やループのような ロジック を表現する方法がありません。Svelteにはあります。

条件付きでマークアップをレンダリングする場合は、そのマークアップを if ブロックで囲みます:

{#if user.loggedIn}
	<button on:click={toggle}> Log out </button>
{/if}

{#if !user.loggedIn}
	<button on:click={toggle}> Log in </button>
{/if}

試してみてください。コンポーネントを更新し、ボタンをクリックしてみてください。