<template>
  <h2>Example v-bind Directive</h2>
  <p>Two props are sent to the component. We must use v-bind for the prop with 'boolean' data type.</p>
  <button v-on:click="this.img = !this.img">Toggle 'img' prop value</button> {{ img }}
  <info-box 
    turtle-text="Turtles can hold their breath for a long time."
    v-bind:turtle-img="img"
  />
</template>

<script>
export default {
  data() {
    return {
      img: true
    }
  }
}
</script>                  

<template>
  <div>
    <img v-show="turtleImg" src="/img_turtle.svg" alt="turtle">
    <h3>Turtles</h3>
    <p>{{ turtleText }}</p>
  </div>
</template>

<script>
  export default {
      props: ['turtleText','turtleImg']
  }
</script>

<style scoped>
div {
  border: solid black 1px;
  padding: 10px;
  margin: 20px 0;
  width: 270px;
  height: 100px;
}
img {
  float: right;
  height: 100%;
}
</style>                  

import { createApp } from 'vue'

import App from './App.vue'
import InfoBox from './components/InfoBox.vue'

const app = createApp(App)
app.component('info-box', InfoBox)
app.mount('#app')