Vue 基礎勉強 v-if

(Vue.js 3.1.5を使用)

v-if
表示、非表示の切り替え。

javascript

const app = Vue.createApp({
    data: () => ({
        toggle: false
    })
})
app.mount('#app')

html

    <div id="app">
        <p v-if="toggle">こんにちは！</p>
    </div>

toggle: false
のままだと、表示されない。

toggle: true
に変更すると、表示される。

v-else

v-ifの表示条件以外（elseの条件）のとき表示する。

html

    <div id="app">
        <p v-if="toggle">こんにちは！</p>
        <p v-else="toggle">おはよう！</p>
    </div>

toggle: falseのとき、

toggle: trueのとき、