<script>
export default {
  name: "GreetingComponent",
  data: function () {
    return {
      msg: "This is great"

    }

  },
  methods:{
    greet: function(msg) {
      this.msg = msg;
    }
  }

};
</script>

<template>
<h2 class="p">Greating: {{msg}}</h2>
  <div class="container">
    <div class="row">
      <div class="col-md-5">
        <div class="card shadow-large">
          <div class="card-body"></div>
          <h3 class="p">Hello is {{msg}}</h3>
              <button class="btn btn-success m-1" @click="greet( 'Good Morning')">good morning</button>
              <button class="btn btn-warning m-1" @click="greet( 'Good Afternnon!')">good afternoon</button>
              <button class="btn btn-danger m-1" @click="greet( 'Good Evening!')">good evening</button>
          
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="css">

</style>