v-if | Notion

条件付きレンダリング
要素の表示・非表示が可能になる(この時DOMを削除・追加する)
高い切り替えコスト
v-else, v-else-ifが使える
実行時に条件をほぼ変更することがない時に利用するといい

<!DOCTYPE html>
<html lang="ja">
<head>
    <script src="<https://unpkg.com/[email protected]>"></script>
</head>
<body>
    <div id="app">
        <p v-if="toggle">Hello</p>
    </div>

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

    </script>
</body>
</html>