<template>
  <h1>v-else Example</h1>
  <p>Click the button to set the 'word' data property to 'Greenland' so that the v-else part of the if-statement is activated.</p>
  <button v-on:click="word = 'Greenland'">word='Greenland'</button>
  <p v-if="word === 'apple'">The word is 'apple'.</p>
  <p v-else-if="word === 'pizza'">The word is 'pizza'</p>
  <div v-else>
    <img src="/img_question.svg" alt="question mark">
    <p>The word is not 'apple', and it is not 'pizza'</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      word: 'pizza'
    };
  }
}
</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')