Cours Svelte et SvelteKit · Module 6: Logique des templates
Les Norns - Logique de template
Dans cette leçon4
Bienvenue au Well of Urd, où les Norns tissent les fils du destin ! Tout comme elles décident de l'avenir, les blocs logiques décident de ce qui sera affiché.
{#if} - Rendu conditionnel
<script>
let isViking = $state(true);
let health = $state(75);
</script>
{#if isViking}
<p>Welcome, warrior!</p>
{/if}
{#if health > 50}
<p class="healthy">Healthy</p>
{:else if health > 20}
<p class="wounded">Wounded</p>
{:else}
<p class="critical">Critical condition!</p>
{/if}{#each} - Itération
<script>
let warriors = $state([
{ id: 1, name: 'Ragnar', rank: 'Jarl' },
{ id: 2, name: 'Bjorn', rank: 'Drengr' },
{ id: 3, name: 'Ivar', rank: 'Drengr' }
]);
</script>
<ul>
{#each warriors as warrior}
<li>{warrior.name} - {warrior.rank}</li>
{/each}
</ul>
<!-- Avec index -->
{#each warriors as warrior, index}
<p>{index + 1}. {warrior.name}</p>
{/each}
<!-- Avec clé (important pour les animations et l'état !) -->
{#each warriors as warrior (warrior.id)}
<WarriorCard {warrior} />
{/each}Déstructuration dans each
{#each warriors as { name, rank, health }}
<div class="warrior">
<h3>{name}</h3>
<p>Rank: {rank}</p>
<p>Health: {health}</p>
</div>
{/each}{#each} avec else
{#each warriors as warrior}
<WarriorCard {warrior} />
{:else}
<p>No warriors in the camp.</p>
{/each}Les Norns tissent le destin - les blocs logiques tissent l'interface !
Code de cette leçon : App.svelte
<script>
// Norns - Three sisters weaving destiny
// {#if}, {#each}, {#await} - weaving fate
let isLoggedIn = $state(false);
let userRole = $state('warrior');
</script>
<main class="norns">
<h1>Norns - Template Logic</h1>
<p class="subtitle">Urd, Verdandi, Skuld weave destiny</p>
<section>
<h2>{"{#if}"} - Conditional rendering</h2>
<div class="controls">
<button onclick={() => isLoggedIn = !isLoggedIn}>
{isLoggedIn ? 'Log out' : 'Log in'}
</button>
<select bind:value={userRole}>
<option value="warrior">Warrior</option>
<option value="jarl">Jarl</option>
<option value="skald">Skald</option>
</select>
</div>
<div class="result">
{#if isLoggedIn}
<div class="logged-in">
<p>Welcome to Valhalla!</p>
{#if userRole === 'jarl'}
<p class="role">You have access to the Jarl's chamber</p>
{:else if userRole === 'skald'}
<p class="role">You may sing the songs</p>
{:else}
<p class="role">Ready for battle!</p>
{/if}
</div>
{:else}
<p class="logged-out">You must log in</p>
{/if}
</div>
</section>
</main>
<style>
.norns {
font-family: 'Georgia', serif;
max-width: 600px;
margin: 0 auto;
padding: 2rem;
background: linear-gradient(135deg, #1a0a2e 0%, #0d0d1a 100%);
color: #e8d5f7;
min-height: 100vh;
}
h1 {
color: #b19cd9;
text-align: center;
}
.subtitle {
text-align: center;
color: #8b7ca8;
}
section {
background: rgba(177, 156, 217, 0.1);
border: 1px solid #b19cd9;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}
h2 {
color: #b19cd9;
font-size: 1.1rem;
margin-top: 0;
}
.controls {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
button {
padding: 0.5rem 1rem;
background: #4a2c7a;
color: white;
border: 1px solid #b19cd9;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #5a3c8a;
}
select {
padding: 0.5rem;
background: #2c1810;
color: #e8d5f7;
border: 1px solid #b19cd9;
border-radius: 4px;
}
.result {
padding: 1rem;
background: rgba(0,0,0,0.3);
border-radius: 8px;
}
.logged-in {
color: #90ee90;
}
.logged-out {
color: #ff6b6b;
}
.role {
margin-top: 0.5rem;
padding: 0.5rem;
background: rgba(177, 156, 217, 0.2);
border-radius: 4px;
}
</style>Entrées de la documentation utilisées dans cette leçon
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quelle est la syntaxe correcte d'un bloc conditionnel dans Svelte ?
2. Pourquoi utilise-t-on une clé (key) dans le bloc {#each} ?
Tâches pratiques dans le jeu
- Éditeur de code
Complète le code pour afficher la liste des guerriers