【Vue.js】条件分岐で要素の表示を切り替える方法

Vue.jsでは、v-ifやv-showを使って、条件に応じた要素の出し分けが可能です。本記事では、それぞれのディレクティブの違いや活用例を通じて、実践的な条件分岐の方法を紹介します。

v-ifを使った要素の表示・非表示
v-else-ifとv-elseで条件分岐を行う
v-showでCSSによる表示・非表示
複数条件の分岐
まとめ

v-ifを使った要素の表示・非表示

v-ifディレクティブは、条件がtrueのときに要素をDOMに挿入し、falseのときには完全に削除します。

<template>
  <div>
    <p v-if="isVisible">この要素は表示されます</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

要素を物理的に削除・追加するため、切り替えコストは高めですが、DOMを軽量に保てます。

v-else-ifとv-elseで条件分岐を行う

v-else-ifとv-elseを使えば、複数の条件に応じて異なる要素を出し分けることができます。

<template>
  <div>
    <p v-if="status === 'success'">成功しました</p>
    <p v-else-if="status === 'loading'">読み込み中...</p>
    <p v-else>エラーが発生しました</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'loading'
    }
  }
}
</script>

状態管理のしやすい設計で、シンプルなUI分岐に向いています。

v-showでCSSによる表示・非表示

v-showはdisplayプロパティを使って表示・非表示を切り替えます。DOMから削除せずに状態を保持できます。

<template>
  <div>
    <p v-show="isVisible">この要素はCSSで非表示になります</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    }
  }
}
</script>

何度も切り替える要素にはv-showが効率的です。

複数条件の分岐

複数の条件を組み合わせて分岐を行いたい場合は、v-ifやv-else-ifを使うことで柔軟なロジックが書けます。

<template>
  <div>
    <p v-if="age < 18">未成年です</p>
    <p v-else-if="age >= 18 && age < 65">成人です</p>
    <p v-else>高齢者です</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 30
    }
  }
}
</script>

このように年齢やステータスなどの条件に応じて出力内容を制御するのは、実務でもよく使われるパターンです。