[vue] 클래스 바인딩하는 여러 방법

공식문서에서 클래스 바인딩하는 여러 방법이 있어 정리하기 위한 포스트

https://vuejs.org/guide/essentials/class-and-style.html

Class and Style Bindings | Vue.js

 

 

 

1. 스타일을 data에 string으로 미리 선언 후 사용

   이후 activeClass의 값을 바꿔 동적으로 클래스를 바꿀 수 있다.

<template>
  <div :class="activeClass"></div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      activeClass: 'active text-danger text',
    }
  },
}
</script>

 

 

2. boolean 데이터를 이용해 클래스를 동적으로 부여

<template>
  <div :class="{active:isActive, error:hasError}">ㄻㅇㄴ로ㅓㅁㅇㄴ론ㅇㅁ롬러ㅏ</div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      isActive: true,
      hasError: false
    }
  },
}

{부여할 클래스 명 : boolean}

위와 같은형식으로 사용한다.

예시소스에서는 isActive가 true, hasError가 false이니 div의 보유 클래스는 active가 될 것이다.

 

 

 

3. 2의 예시를 오브젝트로 1의 예시와 같이 감싸서 사용

<template>
  <div :class="classObejct">ㄻㅇㄴ로ㅓㅁㅇㄴ론ㅇㅁ롬러ㅏ</div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      classObejct: {
      	isActive: true,
      	hasError: false
      } 
    }
  },
}

 

 

4. 삼항연산자를 사용

<template>
  <div :class="isActive ? {active: isActive} : hasError"></div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      isActive: true,
      hasError: 'hasError'
    }
  },
}
</script>

별건 없음.

isActive의 값이 ture이니 {active: isActive}문이 일차적으로 선택이되고,

isActive가 true이니 active 클래스가 주어진다.