Template-Syntax von Svelte

Ausdrücke

<p>Du bist {age} Jahre alt.</p>
<p>Die Volljährigkeit gilt in deinem Land ab {legalAge + '.'}</p>
<p>Du hast: {hasMoneyLeft ? 'Guthaben frei' : 'KEIN Guthaben'}</p>
<p>Letzte Bestellung: {user.findLastOrder()}</p>

Conditionals

<!-- Konditionales Hinzufuegen oder Entfernen: -->
{#if userAge >= 18}
  <p>Du bist voll geschäftsfähig!</p>
{:else if userAge >= 7}
  <p>Du bist beschränkt geschäftsfähig.</p>
{:else}
  <p>Du darfst noch nichts kaufen.</p>
{/if}

v-show gibt es in Svelte nicht, daher müssen wir eine manuelle Stilregel definieren:

<!-- Konditionales Ein- und Ausblenden eines Elements: -->
<div hidden={!showEmailAddress}>{emailAddress}</div>

<style>
  [hidden] {
    display: none !important;
  }
</style>

Zwei-Wege-Binding

<input type="password" bind:value={password} />

Schleifen

<ul>
  {#each items as item, index (index)}
    <li>{item}</li>
  {/each}
</ul>

Attribut-Bindings

<select disabled={userAge < 18}>
  {#each alcoholicItems as item, i (i)}
    <option>{item}</option>
  {/each}
</select>

Events

<button on:click={cancelOrder}>Bestellung stornieren</button>

<h1>Registrieren</h1>
<form on:submit|preventDefault={register}>...</form>