[Vue] 클래스와 스타일 바인딩 완벽 정리

vue.js title

Vue.js에서는 HTML 클래스와 인라인 스타일을 동적으로 바인딩할 수 있어, UI 상태에 따라 손쉽게 스타일을 변경할 수 있습니다. 이번 글에서는 클래스와 스타일 바인딩의 다양한 방법과 실전 예제를 정리해봅니다.

 

---

 

1. 클래스 바인딩

1) 객체 문법

객체 문법을 사용하면 클래스 이름을 키로, 적용 여부를 불리언 값으로 지정할 수 있습니다.
조건에 따라 여러 클래스를 동시에 제어할 때 유용합니다.

    Hello, Vue!




export default {
  data() {
    return {
      isActive: true,
      hasError: false
    };
  }
};

• isActive가 true면 active 클래스가 적용되고,
• hasError가 true면 text-danger 클래스가 적용됩니다.

---

2) 배열 문법

배열 문법을 사용하면 여러 클래스를 배열로 지정해 한 번에 적용할 수 있습니다.
동적으로 클래스 이름을 조합할 때 편리합니다.

    Hello, Vue!




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

• activeClass와 errorClass에 각각 클래스 이름을 할당하면, 해당 클래스가 모두 적용됩니다.

 

---

 

2. 인라인 스타일 바인딩

v-bind:style 디렉티브를 사용하면 인라인 스타일을 동적으로 바인딩할 수 있습니다.
객체 문법을 주로 사용하며, 속성 이름은 카멜 케이스로 작성합니다.

    Hello, Vue!




export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 20
    };
  }
};

• textColor와 fontSize 값을 바꾸면 해당 스타일이 즉시 반영됩니다.

 

---

 

3. 마무리 및 팁

• 클래스 바인딩은 버튼 활성화, 에러 표시 등 UI 상태 표현에 매우 유용합니다.
• 스타일 바인딩은 동적으로 변경되는 스타일에 적합하지만, 가능한 한 CSS 클래스를 우선 사용하세요.
• 성능 고려: 불필요하게 많은 동적 바인딩은 성능 저하를 유발할 수 있으니 꼭 필요한 곳에만 사용하세요.

이처럼 Vue의 클래스와 스타일 바인딩 기능을 활용하면, 사용자 인터페이스를 더욱 유연하고 동적으로 관리할 수 있습니다.

 

[Vue] 클래스와 스타일

 

[Vue] 계산된 속성(computed properties)의 이해와 활용