Bases de Svelte
Introduction
Liaisons
Classes et styles
Svelte avancé
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
$app/state
Erreurs et redirections
SvelteKit avancé
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
Conclusion
Parfois vous ne savez pas à l’avance quel élément doit être affiché. Plutôt que d’écrire une
interminable liste de blocs {#if ...}...
App
{#if selected === 'h1'}
<h1>Je suis un élément <code><h1></code></h1>
{:else}
<p>TODO autres</p>
{/if}...nous pouvons utiliser <svelte:element> :
App
<svelte:element this={selected}>
Je suis un élément <code><{selected}></code>
</svelte:element>La valeur this peut être n’importe quelle chaîne de caractères — si cette valeur est falsy, aucun
élément n’est rendu.
Modifier cette page sur Github
précédent suivant
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
const options = ['h1', 'h2', 'h3', 'p', 'marquee'];
let selected = $state(options[0]);
</script>
<select bind:value={selected}> {#each options as option} <option value={option}>{option}</option> {/each}</select>
{#if selected === 'h1'}<h1>Je suis un élément<code><h1></code></h1>
{:else}<p>TODO autres</p>
{/if}