v-ifとv-showディレクティブは、条件分岐を行うことができるのですが、
挙動が少し異なります。
例えば、以下のコードで、ボタンを押下時に
要素を表示・非表示を切り替えてみます。
どちらの要素もdataのokがfalseになった時にはブラウザの画面からは消えますが、
コンソールを確認すると、下の様になり、異なっていることがわかります。
|
1 2 3 4 5 6 |
<!----> //v-if非表示 <div style="display: none;"> //v-show非表示 v-showを表示 </div> <button>表示・非表示</button> |
v-ifにおける描画
条件を満たさない場合は、DOM要素ごと削除されます。
監視も解除され、コンポーネントであればインスタンスが破壊されます。
また、次に描画されるときは初期化されて表示されます。
v-showによる描画
条件を満たさない場合はdisplay: noneが適用されてブラウザでは非表示となります。
実際にDOMから消えてはいないので、常にリアクティブで監視されています。
v-ifはグループ化が可能
たとえば、v-ifをテンプレート内のヘッダー、メイン、フッター全ての要素に付与するのは冗長です。
この場合、タグを使うことで複数の要素をグループ化することができます。
|
1 2 3 4 5 |
<template v-if="ok"> <header>ヘッダー</header> <main>メイン</main> <footer>フッター</footer> </template> |
また、グループ化については、v-showでは使用できないないので気をつけましょう。
