[Vue] 클래스와 스타일 바인딩

1. 클래스  바인딩 - 객체구문

:class="{ '적용될 클래스명': true 또는 false의 조건식 }"

v-bind:class="클래스명"
v-bind:class="{ 클래스명: 조건 }"

• 조건식을 사용하여 boolean값이 true인 경우에만 해당하는 클래스명이 적용됨
• 위와 같이 앞에는 적용될 클래스명 위치하고 뒤에는 true, false의 boolean이 위치
• v-bind:class는 문자열과 객체 또는 배열을 둘 다 받을 수 있다.
• 만약 class명에 "-"가 존재한다면, 그 class명을 string으로 묶어주어야한다.

<template>
  <span :class="{ red: isRed, 'font-bold': isFont }">www.naver.com</span>
</template>

<script>
data: function() {
  return {
    isRed: true,
    isFont: true,
  }
}
</script>

<style>
  .red { color: red; }
  .font-bold { font-wegiht: 600; }
</style>

 

 

class의 객체가 복잡할 때

classObject라는 객체를 data에 따로 만들고 각각의 class명에 값을 준 후 => 이를 class명에 써줄 수도 있다.

<template>
  <span :class="classObject">www.naver.com</span>
</template>

<script>
 data: function() {
   return {
    classObject: {
        red: true,
        'font-bold': true
      }
    }
 }
</script>

<style>
  .red { color: red; }
  .font-bold { font-wegiht: 600; }
</style>

이렇게 화면에 나온다

 

computed에 선언 되었을 때

<template>
  <span :class="classObject">www.naver.com</span>
</template>

<script>
  data() {
    return {
      isRed: false;
    }
  },
   computed: {
    classObject() {
      return {
        red: this.isRed,
        green: !this.isRed
      }
    },
  },
</script>

<style>
  .red { color: red; }
  .green { color: green; }
</style>

이렇게 화면에 나온다

 

 

2. 클래스 바인딩 - 배열구문

<template>
  <span :class="[ colorClass, lineClass ]">www.naver.com</span>
</template>

<script>
 data: function() {
   return {
      colorClass: 'color',
      lineClass: 'underLine'
   }
 }
</script>

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

www.naver.com

 

 

 

3. 스타일 바인딩 - 객체구문

<template>
  <span :style="{ color: fontColor, fontSize: size}">www.naver.com</span>
</template>

<script>
 data: function() {
   return {  
     fontColor: 'red',
     size: '30px'
   }
 }
</script>

템플릿을 더 깔끔하게 만들기 위해, 스타일 객체에 직접 바인딩하는 것이 좋다.

<template>
  <span :style="styleObject">www.naver.com</span>
</template>

<script>
 data: function() {
   return {  
     styleObject: {
       color: 'red',
       fontSize: '30px'
     }
   }
 }
</script>

 

 

4. 스타일 바인딩 - 배열구문

<template>
  <span :style="[ colorStyle, lineStyle ]">www.naver.com</span>
</template>

<script>
 data: function() {
   return {  
     colorStyle: {
       color: 'blue'
     },
     lineStyle: {
       'text-decoration': 'underline'
     }
   }
 }
</script>

 

 

 

 

 

 

---

예제

<template>
    <button @click="isActive=!isActive">isActive 변경하기</button>
    <p class="item" :class="{ 'is-active': isActive }" >동적 클랙스</p>
    <p class="item" :style="{ color: textColor, backgroundColor: bgColor }" >동적 스타일</p>
</template>

<script>
export default {
  name: "Event",
  components: {},
  data() {
    return {
      isActive: true,
      textColor: 'blue',
      bgColor: 'lightgray',
    };
  },
};
<scirpt>

<style>
.item { transition: background-color 1s; padding: 4px 8px; } /* class에 걸어줌 */
.is-active { background: #ffeaea;}
</style>

 

:class 에서 isActive: true 이니깐  .is-active의 스타일이 먹히는거다!

그래서 처음에는 핑크색 bg가 생기고  버튼을 다시 클릭하면 false 로 바껴서 style이 없어지게 된다. 

 

:style 동적으로 부여해주면 Elements에 이렇게 나타난다.