<template>
  <div id="app">
    <h1 
    v-bind:class="{active: isActive}"
    @click="activate">
    Hello?!({{isActive}})
  </h1>
  <!-- v-bind:class 약어 :class -->
  <h1 
    :class="{active: isActive}"
    @click="activate">
    Hello?!({{isActive}})
  </h1>
  <h1 class="static"
    :class="[demo, tete]">
    배열로 정의하기
  </h1>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive: false,
      demo:'asd',
      tete:'bbi'
    }
  },
  watch:{
    isActive(value){
      console.log(value);
    }
  },
  methods:{
    activate(){
      this.isActive = true
    }
  }
}
</script>

<style scoped>
  .active {
    color:red;
    font-weight: bold;
  }
</style>