概要
「ロビー」から「ゲーム画面」へ遷移したい場合などの処理について記載する。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>test</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div id="app"> <template v-if="scene === 'lobby'"> <button @click="chengDisplay">change display!</button> </template> <template v-if="scene === 'scene1'"> <p>changed display</p> </template> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="js/main.js"></script> </body> </html>
javascript
'use strict'; const vm = new Vue({ el: '#app', data: { scene: "lobby", }, methods: { chengDisplay: async function() { this.scene = "scene1" }, }, })
備考
- v-ifを使うことで、DOM要素自体が削除される。
- v-ifは、単一要素にしか対応していないため、複数の要素を削除できるようにtemplate要素を利用している。
