<div class="container" v-bind:class="{ active: isActive, 'text-red': isRed }">
    Class Binding
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      isRed: true,
    };
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 200px;
}

.active {
  background-color: yellow;
  font-weight: bold;
}

.text-red {
  color: red;
}
</style>

---

배열을 이용해서도 가능

<template>
  <div class="container" v-bind:class="[activeClass, redClass]">
    Class Binding
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeClass: "active",
      redClass: "text-red",
    };
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 200px;
}

.active {
  background-color: yellow;
  font-weight: bold;
}

.text-red {
  color: red;
}
</style>

---

인라인 스타일 바인딩

  <div v-bind:style="styleObject">
    인라인 스타일 Binding
  </div>
</template>
<script>
export default {
  data() {
    return {
      styleObject: {
        backgroundColor: "yellow",
        color: "red",
        fontWeight: "blod",
      },
    };
  },
};
</script>

---

인라인 스타일 배열

  <div v-bind:style="[baseStyle, addStyle]">
    인라인 스타일 Binding
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseStyle: "background-color:yellow",
      addStyle: "color:red;font-weight:bold",
    };
  },
};
</script>```