Vue 클래스 & 스타일 바인딩

 

- 클래스와 스타일 바인딩

• Vue는 v-bind가 class와 style과 함께 사용될 때 특별한 개선사항을 제공
• 문자열 외에도 표현식은 객체 또는 배열로 평가될 수 있음

---

- HTML 클래스 바인딩

• 객체 구문
  • :class에 객체를 전달하여 클래스를 동적으로 전환
  • active 클래스의 존재가 데이터 속성 isActive가 Truthy에 의해 결정됨

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

  • 객체에 더 많은 필드를 포함하여, 여러 클래스를 전환할 수 있음
  • 예제 1과 예제 2는 동일한 결과를 렌더링 함

  <-- Example 1 -->
  <div
    class="static"
    :class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  
  <-- Example 2 -->
  <div :class="classObject"></div>

  // Example 1
  data() {
    return {
      isActive: true,
      hasError: false
    }
  }
  
  // Example 2
  data() {
    return {
      classObject: {
        isActive: true,
        error: null
      }
    }
  },
  computed: {
    classObject() {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal'
      }
    }
  }  

  <-- 위의 결과 -->
  <div class="static active"></div>

• 배열 구문
  • 배열을 :class에 전달하여 클래스 목록 적용

  <div :class="[activeClass, errorClass]"></div>

  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    }
  }

  <-- 위의 결과 -->
  <div class="active text-danger"></div>

  • 조건부로 목록의 클래스도 전환하려면 삼항 표현식을 사용

  <div :class="[isActive ? activeClass : '', errorClass]"></div>

  • 배열 구문내에서 객체 구문을 사용 가능

  <div :class="[{ active: isActive }, errorClass]"></div>

---

- 인라인 스타일 바인딩

• 객체 구문
  • :style 속성 사용
  • JavaScript 객체라는 점을 제외하면 CSS와 거의 비슷
  • CSS 속성 이름에는 카멜 케이스(camelCase) 또는 케밥 케이스(kebab-case, 케밥 케이스와 함께 따옴표 사용) 사용 가능

  <-- Example 1 -->
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  
  <-- Example 2 -->
  <div :style="styleObject"></div>

  // Example 1
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    }
  }
  
  // Example 2
  data() {
    return {
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }
    }
  }

• 배열 구문
  • :style의 배열 구문을 사용하면 동일한 요소에 여러 스타일 객체를 적용할 수 있다.

  <div :style="[baseStyles, overridingStyles]"></div>

 

• 자동 접두사
  • :style에서 vendor prefixes가 필요한 CSS 속성(예: transform)을 사용하면 Vue는 적용된 스타일에 적절한 접두사를 자동으로 감지하고 추가

---

[ 참고 자료 ]

https://v3.ko.vuejs.org/guide/class-and-style.html#html-%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A2%E1%84%89%E1%85%B3-%E1%84%87%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%AB%E1%84%83%E1%85%B5%E1%86%BC

클래스와 스타일 바인딩 | Vue.js