// 클래스 바인딩
// 특정한 데이터 (예제에서 isActive) 를 가지고서 class 에 연결하거나 연결하지 않거나
<template>
  <h1 
    :class="{ active : isActive }"
    @click="activate">
    Hello?!{{ isActive }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    activate() {
      this.isActive = true
    }
  }
}
</script>

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

// 스타일 바인딩
<template>
  <h1
    :style="[fontStyle, backgroundStyle]"
    @click="changeStyle">
    Hello?!
  </h1>
</template>

<script>
export default {
  data() {
    return {
      fontStyle: {
         color: 'orange',
        fontSize:'30px;'
      },
      backgroundStyle: {
        backgroundColor:'black'
      }
    }
  },
  methods: {
    changeStyle() {
      this.fontStyle.color = 'red',
      this.fontStyle.fontSize = '50px'
    }
  }
}
</script>