Vue.js

【Vue.js】v-if【条件付きレンダリング】

Vue.jsのv-ifディレクティブについて説明します。

v-ifディレクティブとは?

条件付きレンダリング

v-ifとは、表示・非表示を切り替えるディレクティブのこと。

  • 対象:ブロック
  • 切替基準:true時に表示、false時に非表示

下記に一例を示す。

HTML

 

JavaScript

 

役割の類似するディレクティブ【v-show】

共通点と違いについては下記参照

【Vue.js】v-ifとv-showの違い【DOM上の有無】Vue.jsのv-ifディレクティブとv-showディレクティブの共通点と差異について説明します。 v-ifとv-showの共通点 ...

公式

v-if

以上です。

ABOUT ME
ダイス
アラサーSE(20代)。 主な経験は、PGとしてJava(SpringBoot)、C、PHP(Laravel)、VBAがある。SS、UTの経験有り。最近はUI工程を経験中。 IT業界だけでなく、教育業界(予備校での運営スタッフ)での経験有り。 サイトでは、特定の分野に限定せずに幅広く発信していきます。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です