Vue3 条件文

Vue 3 では、テンプレート内で複数の条件文を使用してコンポーネントのレンダリングを制御できます。

主な条件文は次のとおりです。v-if、v-else-if、v-elseとv-show以下にそれらの使用方法と違いを示します。

  • v-if：要素は条件がfalsefalse の場合、DOM にレンダリングされません。条件の変化が頻繁でない場合に適しています。
  • v-show：要素は常に DOM にレンダリングされます。条件の変化が頻繁な場合に適しており、表示/非表示の切り替えパフォーマンスが優れています。
  • v-else-ifとv-else：複数の条件分岐を処理するために使用され、v-ifと組み合わせて使用します。

条件分岐

v-if

式の真偽に基づいて条件付きで要素をレンダリングします。式が真の場合、その要素がレンダリングされます。偽の場合、レンダリングされません（DOM にその要素は生成されません）。

条件分岐には v-if ディレクティブを使用します。ディレクティブの式が true を返す場合にのみ表示されます：

v-if ディレクティブ

要素内で v-if ディレクティブを使用します：

<div id="app"> <p v-if="seen">今、私が見えています</p> </div> <script>const app = { data() { return { seen: true /* falseに変更すると、情報は表示されません */ } } } Vue.createApp(app).mount('#app')</script>

試してみる »

ここでは、v-if ディレクティブが式 seen の値（true または false）に基づいて p 要素を挿入するかどうかを決定します。

v-if はディレクティブであるため、要素に追加する必要があります。複数の要素の場合は、<template> 要素にラップして、その上で v-if を使用できます。最終的なレンダリング結果には <template> 要素は含まれません。

v-if ディレクティブ

<template> 要素上で v-if ディレクティブを使用します：

<div id="app"> <template v-if="seen"> <h1>ウェブサイト</h1> <p>Google</p> <p>サンプル</p> <p>Taobao</p> </template> </div> <script>const app = { data() { return { seen: true /* falseに変更すると、情報は表示されません */ } } } Vue.createApp(app).mount('#app')</script>

試してみる »

v-else

v-if と組み合わせて使用し、前の v-if 式が偽の場合にレンダリングされる要素を表します。

v-else ディレクティブを使用して、v-if に "else" ブロックを追加できます：

v-else ディレクティブ

ランダムに数字を生成し、0.5 より大きいかどうかを判定して、対応する情報を出力します：

<div id="app"> <div v-if="Math.random() > 0.5">乱数は 0.5 より大きい</div> <div v-else>乱数は 0.5 以下</div> </div> <script> Vue.createApp().mount('#app') </script>

試してみる »

v-else-if

v-if と v-else の間に追加の条件分岐を追加するには、v-else-if を複数連続して使用できます。

v-else ディレクティブ

type 変数の値を判定します：

<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> const app = { data() { return { type: "C" } } } Vue.createApp(app).mount('#app') </script>

試してみる »

v-else、v-else-if は v-if または v-else-if の後に続く必要があります。

v-show

式の真偽に基づいて条件付きで要素を表示または非表示にします。v-if とは異なり、v-show は常に要素を DOM に保持し、CSS の display プロパティによって要素の表示と非表示を制御します。

v-show ディレクティブを使用して、条件に応じて要素を表示することもできます：

v-show ディレクティブ

<h1 v-show="ok">Hello!</h1>

試してみる »

要素の表示と非表示を頻繁に切り替える必要がある場合は、v-show の使用をお勧めします。CSS スタイルを切り替えるだけで、要素全体を再レンダリングしないためです。

その他の拡張