この記事では、条件分岐を行う v-showディレクティブについて学習します。
この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。
目次
v-showとは
v-showディレクティブは、要素を表示/非表示切り替帰ることができます。
v-ifのように、DOMから要素を追加/削除するのではなく、CSSのdisplay プロパティをON/OFFすることで、を切り替えることができます。
v-showを使ってみる
それでは、実際に使ってみましょう。
v-ifのレクチャーのコードのつづきです。
p要素を設置して、表示、非表示を切り替えることをやります。
v-ifとなっているところを、v-showに書き換えます。
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})
toggleをfalseの時は、result欄に何も表示されてされません。
toggleをtrueに変えてみましょう。
プロパティがtoggleがtrueの時は、Helloと表示されています。
ここで、DOMツリーががどうなっているか観てみましょう。
Helloを選択して、右クリック、検証をクリックします。
Hello
このように、p要素が描画されています。
こここで、 toggle: falseにします。
右クリック ＞ 検証 として、 確認すると
p要素がCSSの、displayがnoneにより、非表示になっています。
v-ifディレクティブでは、条件を満たさなかった場合、要素はDOMレベルで削除されました。
それに対して、v-showでは、DOMからは削除されない点が特徴です。
CSSのdisplay プロパティを操作して、表示、非表示を切り替えます。
v-showのv-ifと比べたときのメリット
要素を頻繁に表示/非表示を繰り返す用途の場合、v-ifと比べて、描画コストを低く抑える観点で、有利です。
動画でv-showを学習する
サンプルコード
おわりに
この記事ではでは、条件分岐 v-showについて学習しました。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する
