条件分岐

条件分岐は"{#if 条件}..{:else if 条件}..{:else}..{/if}"にて条件に応じたレンダリングを行う。

App.svelte

<script>
        let bind_value = '';
</script>

<div>
        <input placeholder="" bind:value={bind_value}>
        {#if bind_value.length == 0}
                <div>何か入力してください。</div>
        {:else if bind_value.length < 5}
                <div>もっと入力してください。</div>
        {:else}
                <div>入力しすぎです。</div>
        {/if}

</div>

<style>
</style>

---

適用イメージ