<template>
  <h1>v-if Example</h1>
  <p>Click the button to set the 'createImgDiv' data property to 'true'.</p>
  <button v-on:click="createImgDiv = true">createImgDiv=true</button>
  <div v-if="createImgDiv">
    <img src="/img_apple.svg" alt="apple">
    <p>This is an apple.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      createImgDiv: false
    };
  }
}
</script>

<style>
#app > div {
  width: 120px;
  padding-top: 10px;
  margin-top: 10px;
  border: dotted black 1px;
  text-align: center;
}
img {
  width: 80%;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)
app.mount('#app')