条件によって、動的にコンテンツの表示を切り替えることができる

主に使用するディレクティブ

• v-ifとv-else
• v-else-if
• v-show
• v-ifとv-showの違い

v-ifとv-else

• v-showとの組み合わせはできない
• v-ifの直後にv-elseがないとv-elseが反応しない

<div id="app">
    <p v-if="toggle">Yes</p>
    <p v-else>No</p>
		🔼v-elseは直後に記述する必要がある

    <pre>{{ $data }}</pre>
</div>

new Vue({
    el: "#app",
    data: {
        toggle: true
    }
});

v-else-if

• v-showとv-else組み合わせて記述することはできない

<div id="app">
    <p v-if="color === 'red'">Stop</p>
    <p v-else-if="color === 'yellow'">Caution</p>
    <p v-else-if="color === 'blue'">Go</p>
    <p v-else>Not red/yellow/blue</p>
</div>

const app = Vue.createApp({
    data: () => ({
        color: 'blue1'
    })

})
app.mount('#app')