🔖

【Vue.js】v-if と v-show の使い分けについて

に公開
Vue.js
tech

今回は Vue.js の v-if と v-show の使い分けについて説明します！
※ あくまで参考程度に読んでいただけると嬉しいです。

v-show の使いどき

基本的に v-show を使うときは「その要素が DOM に存在する必要があるか」で考えます。
DOM にその要素が存在している必要がある場合は v-show、そうでない場合は v-if を使います。

普段は非表示にするが、要素の取得が必要なもの

例えば、普段は表示させないけれど要素として表示させておきたいもの。
重なる要素があって普段は非表示にしているけれど、非表示にしているものも含めて CSS を書きたい時などは v-show を選びます。

v-if の使いどき

データを表示させる際に、必要なデータのみ表示させる

例えば API から取得したデータで、フィルタリングしたデータのみを表示させたい場合。
基本的に再表示をしないと決めているものは v-if にします。

const items = [
  { id: 1, name: 'Taro', authority: true },
  { id: 2, name: 'Hanako', authority: false },
  { id: 3, name: 'Jiro', authority: true },
];

// 例えば authority の値に合わせて記号を表示させるときなど
// リストで表示させるだけなので item.authority の値は変わらない、静的なデータという前提
<ul>
  <li v-for="item in items">
    <span v-if="item.authority">◎</span>
    <span v-else>×</span>
    {{ item.name }}
  </li>
</ul>

Discussion