Svelteテンプレート:条件付きロジック

Svelteでテンプレートを操作する方法、特に条件付きの使用方法を学びます

Webに適したテンプレート言語は、条件付き構造とループの少なくとも2つを提供します。

Svelteも例外ではありません。この投稿では、条件付き構造について説明します。

値/式を確認できるようにし、それが真の値を指している場合は何かを実行し、それが偽の値を指している場合は別のことを実行します。

Svelteは、非常に強力な制御構造のセットを提供します。

最初はもし

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

開口部があります{#if}とエンディング{/if}。開始マークアップは、値またはステートメントが真実であるかどうかをチェックします。この場合isRedブール値にすることができますtrue値:

<script>
let isRed = true
</script>

空の文字列は偽物ですが、内容のある文字列は真実です。

0は偽物ですが、0より大きい数は真実です。

ブール値trueもちろん、真実です、そしてfalse偽物です。

開始マークアップが満たされない場合(偽の値が提供される場合)、何も起こりません。

それが満たされない場合に何か他のことをするために、私たちは適切に呼ばれるを使用しますelseステートメント:

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

最初のブロックがテンプレートにレンダリングされるか、2番目のブロックがレンダリングされます。他に選択肢はありません。

任意のJavaScript式を使用してifブロック条件なので、を使用してオプションを無効にすることができます!オペレーター:

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

さて、else追加の条件を確認することをお勧めします。それは{:else if somethingElse}構文は次のとおりです。

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

これらのブロックは1つだけでなく、多く持つことができ、ネストすることができます。より複雑な例を次に示します。

{#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}

私の無料ダウンロードSvelteハンドブック


より洗練されたチュートリアル: