v-showディレクティブ
条件に合わせて表示/非表示を切り替えるには、v-showが使用できます。
<section v-show="true">
<p>表示or非表示</p>
</section>
v-if, v-else-if, v-else ディレクティブ
同じようなディレクティブに、v-if, v-else-if, v-elseがあります。
<section v-if="true">
<p>表示or非表示</p>
</section>
v-showとv-ifの使い分け
- v-show の場合、style属性の値を display: none; にすることで、非表示になります。
DOMはそのままで、CSSで切り替えているということです。
- v-ifの場合、DOMそのものが書き換わります。
つまり属性値が true となるまで、描画処理を後回しにできます。
従って、何度も表示/非表示を切り替える場合は、v-show、一度表示したらほとんど切り替えない場合は v-ifが適しているでしょう。
タグの使用
template要素はHTMLのタグの1つとして定義されているものですが JavaScriptから「この要素を表示する」という命令を実行するまではブラウザに表示されない 特徴があります。
template要素はデフォルトでHTMLに描画されない性質を持つため、初期状態で非表示にする場合は、<div>などの要素よりも適しているでしょう。
<template v-if="true">
<p>表示or非表示</p>
</template>