<template>
  <h1>v-else-if Example</h1>
  <p>Click the button to set the 'word' data property to 'pizza'.</p>
  <button v-on:click="word = 'pizza'">word='pizza'</button>
  <div v-if="word === 'apple'">
    <img src="/img_apple.svg" alt="apple" />
    <p>The value of the 'word' property is 'apple'.</p>
  </div>
  <div v-else-if="word === 'pizza'">
    <img src="/img_pizza.svg" alt="pizza" />
    <p>The value of the 'word' property is 'pizza'</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      word: 'apple'
    };
  }
}
</script>

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

img {
  width: 50%;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'

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