[Vue.js] v-bind를 이용한 Class, Style 변경

v-bind 활용

• v-bind를 활용하면 태그의 속성값에 데이터바인딩이 가능하다.
• class, style 또한 v-bind를 사용해서 조작가능하다.

<template>
  <div class="ExampleViews">
    <div class="container" v-bind:class="{ active: isActive, 'text-red': isRed }">Class Binding (object)</div>
    <div class="container" v-bind:class="[activeClass, redClass]">Class Binding (Array)</div>
    <div class="container" v-bind:style="styleObject">Inline-style Binding (object)</div>
    <div class="container" v-bind:style="[baseStyle, addStyle]">Inline-style Binding (Array)</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: true,
      isRed: false,
      activeClass: 'active',
      redClass: 'text-red',
      styleObject: {
        backgroundColor: 'yellow',
        color: 'blue',
        fontWeight: 'bold',
      },
      baseStyle: 'background-color:wheat',
      addStyle: 'color:green; font-weight:bold;',
    };
  },
};
</script>
<style scoped>
.ExampleViews {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 50%;
  height: 50px;
  margin: 5px;
}

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

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