Modèles Svelte: logique conditionnelle

Apprenez à travailler avec des modèles dans Svelte et en particulier à utiliser des conditions

Tout bon langage de création de modèles pour le Web vous fournit au moins 2 choses: une structure conditionnelle et une boucle.

Svelte ne fait pas exception, et dans cet article, je vais examiner les structures conditionnelles.

Vous voulez pouvoir regarder une valeur / expression, et si cela pointe vers une valeur vraie, faites quelque chose, si cela pointe vers une valeur fausse, faites autre chose.

Svelte nous fournit un ensemble très puissant de structures de contrôle.

Le premier estsi:

{#if isRed}
	<p>Red</p>
{/if}

Il y a une ouverture{#if}et une fin{/if}. Le balisage d'ouverture vérifie qu'une valeur ou une déclaration est véridique. Dans ce casisRedpeut être un booléen avec untrueévaluer:

<script>
let isRed = true
</script>

Une chaîne vide est fausse, mais une chaîne avec du contenu est véridique.

0 est faux, mais un nombre> 0 est vrai.

La valeur booléennetrueest la vérité, bien sûr, etfalseest faux.

Si le balisage d'ouverture n'est pas satisfait (une valeur falsifiée est fournie), alors rien ne se passe.

Pour faire autre chose si ce n'est pas satisfait, nous utilisons le nom appropriéelsedéclaration:

{#if isRed}
	<p>Red</p>
{:else}
	<p>Not red</p>
{/if}

Soit le premier bloc est rendu dans le modèle, soit le second. Il n'y a pas d'autre option.

Vous pouvez utiliser n'importe quelle expression JavaScript dans leifcondition de blocage, vous pouvez donc annuler une option à l'aide de la!opérateur:

{#if !isRed}
	<p>Not red</p>
{:else}
	<p>Red</p>
{/if}

Maintenant, à l'intérieur duelsevous voudrez peut-être vérifier une condition supplémentaire. C'est là que le{:else if somethingElse}la syntaxe arrive:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else}
  <p>Not red nor green</p>
{/if}

Vous pouvez avoir plusieurs de ces blocs, pas un seul, et vous pouvez les imbriquer. Voici un exemple plus complexe:

{#if isRed}
  <p>Red</p>
{:else if isGreen}
  <p>Green</p>
{:else if isBlue}
  <p>It is blue</p>
{:else}
  {#if isDog}
    <p>It is a dog</p>
  {/if}
{/if}

Téléchargez mon gratuitManuel de Svelte

Modèles Svelte: logique conditionnelle

Apprenez à travailler avec des modèles dans Svelte et en particulier à utiliser des conditions

Plus de tutoriels sveltes: