その他

【Vue.js】条件付きレンダー

その他
この記事は約2分で読めます。

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>