[Vue] Class & Style 바인딩

v-bind는 : 약어로 사용 가능
예시 v-bind:class :class 동일한 의미

class 바인딩

<template>
    <div class="active"></div>
    <div :class="activeClass"></div>
    <div :class="{ active : isAcitve }"></div>
    // 삼항 연산자로 class 바인딩 가능
    <div :class="[ isAcitve ? 'active' : '' ]"></div>
</template>

export default{
  name : "test",
  data(){
        return {
              activeClass : "active",
              isAcitve : true,
        }
  }
}

style 바인딩

<template>
    <div :style="{ color : activeColor, fontSize : fontSize "></div>
    <div :style="styleObject"></div>
    <div :style="[ isAcitve ? 'font-size : 32px' : '16px' ]"></div>
</template>

export default{
  name : "test",
  data(){
        return {
              activeColor : "blue",
              fontSize : "30px",

              styleObject : {
                color : "red",
                  fontSize : "20px"
            },

              isActive : true
        }
  }
}