TECHNOLOGY Minato

Vue.js入門【条件付きレンダリング】

こんにちは、ミナトです。

「Vue.jsで条件によって表示を切り替えるにはどうしたらいいの？」

今回はこのような疑問に答えるために、Vue.jsでの「条件付きレンダリング」について解説します。

結論をお伝えすると、条件によって表示を切り替えるには、v-ifまたはv-showディレクティブを利用します。
以下、具体的な使い方を紹介するので、参考にしてみてください。

条件付きレンダリング

v-if、v-else、v-else-if

条件によって表示を切り替えるためには、v-if="条件"と記述します。
条件に該当しない場合の表示には、v-elseを使います。

また、v-else-if="条件"とすることで条件を複数定義することもできます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="app">
        <p v-if="type === 'A'">
            A
        </p>
        <p v-else-if="type === 'B'">
            B
        </p>
        <p v-else>
            Other
        </p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>
</html>
new Vue({
  el: '#app',
  data: {
    type: 'C',
  }
})

v-show

CSSのdisplayプロパティを切り替えることで、要素の表示・非表示を切り替えたい場合は、v-showを利用します。
以下の例では、VueインスタンスのisShowの値がtrueの時に表示され、falseの時は非表示となります。

<div id="app">
    <p v-show="isShow">
        hello, world!
    </p>
</div>
new Vue({
  el: '#app',
  data: {
    isShow: false,
  }
})

v-if と v-showの違い

v-ifとv-showの違いについて、簡単に説明します。

v-if
・要素をDOM上、追加・削除
・v-else、v-else-ifが使える
・高い切り替えコスト
v-show
・要素をDOM上、追加・削除
・v-else、v-else-ifが使えない
・高い初期描画コスト

v-ifではHTML上要素が追加・削除されるのに対し、v-showでは、CSSのdisplayプロパティsのON・OFFを切り替えることによって表示と非表示を切り替えています。（HTML上要素が消えるわけではない）

また、v-showでは、v-else、v-else-ifは利用できません。

単純な表示・非表示の切り替えかつ頻繁に切り替えられるものはv-show。
それ以外はv-ifを利用するという認識で大丈夫だと思います。

RECOMMENDこちらの記事も人気です。