Vue

Vue.js 条件分岐のv-ifとv-else

引き続きディレクティブを試す。ディレクティブはv-接頭辞ではじまる、HTMLとjsを紐づける機能(バインディング)のこと。

v-if

See the Pen v-if by git-cat-meow (@git-cat-meow) on CodePen.

v-ifを使ってseenプロパティを指定する。js側で初期値を設定し、ここではtrueとする。

初期値のままだと条件を満たしているので表示されるが、コンソールで値をfalseに書き換えると表示されなくなる。
プロパティの値を変更するには、app3.seen = falseとする(seenだけではダメ)。

DOM上ではコメントアウト扱いに変更されている。

v-else

ifがあるということで、elseもある。

See the Pen v-if by git-cat-meow (@git-cat-meow) on CodePen.

こちらもコンソールでfalseに変更すると…

変わった…。

さらに複数の条件を用いたい場合は、v-else-ifディレクティブを使用する。

参考にしたページにもあるが、v-ifディレクティブは単一の要素にしか使用できないので、ブロック単位で表示切替をしたい場合は<template>タグなどで囲む必要がある。

v-show

要素の表示・非表示を制御するディレクティブにはv-showもある。こちらも真偽値で表示と非表示を制御する。

See the Pen v-show by git-cat-meow (@git-cat-meow) on CodePen.

コンソールで app3.seen = false を叩くと、表示されなくなる。

v-ifとの違いだが、v-ifが対象をコメントアウトするのに対してv-showはdisplay=noneする点で異なる。

v-showの方が処理負荷は小さいので、頻繁な切り替えがされそうな商品ページでの説明切り替えなどではこっちの方が良さそう。

カテゴリー: Vue
このサイトの主
投稿を作成しました 115

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る