【Vue.js】v-　ディレクティブまとめ②～条件付きレンダリング～

v-から始まるディレクティブのまとめ記事はこちら↓

【Vue.js】v-ディレクティブまとめ

Vue特有のv-から始まるディレクティブをまとめてみました。＜環境＞Vue.js v2 v-text dataの文字列表示。{{}}と同じ意味を持ち、同じ使い方をする。 v-once 一度だけ表示させたい時に使う。 v-html vueで作...

morymory.com

2020.01.18

v-if

if文。条件がtrueもしくはfalseの時に実行される。

    <div id="app">
        <p v-if="text">trueです。</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                text: true,
            }
        })
    </script>

falseの時に表示したい場合、textをfalseに変更して、v-ifディレクティブのdata参照に「！」をつける。
大概のプログラミング言語において、!はtrueからfalseへ反転する意味を持つ。

    <div id="app">
        <p v-if="!text">falseです。</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                text: false,
            }
        })
    </script>

v-else

上記のifで設定した条件でないときに実行されるディレクティブ。
注：v-elseは必ずv-if文に繋げて書かなければならない。（必ずifの下に来る）
ifとelseの間に何かしらのコードを書き込んだ場合、動作しない。

    <div id="app">
        <p v-if="text">true</p>
        <p v-else>false</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                text: true,
            }
        })
    </script>

textがtrueの時「true」と表示され、textがfalseの時「false」と表示される。

v-else-if

複数の条件を設けたい時、ifとelseの間にv-else-ifを用いることができる。
dataに追加条件を記載して、テンプレート構文（HTML）にv-else-ifを追加する。

    <div id="app">
        <p v-if="text">true</p>
        <p v-else-if="text2">textがfalseでtext2がtrueの時</p>
        <p v-else>false</p>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                text: false,
                text2:true
            }
        })
    </script>