[Udemy Vue 완벽가이드 Section2] 35. 클래스 및 연산(computed) 프로퍼티

원한다면 computed 프로퍼티를 동적으로 CSS 클래스를 추가할 때 활용할 수도 있다.

HTML 코드에 로직이 있는 건 최적은 아니므로.

 

<div class="demo" :class="{active: boxASelected}" @click="boxASelected('A')"></div>

 

 

위와 같은 class바인딩도 괜찮지만, 로직을 HTML 외부로 옮기고 싶을 경우 computed 프로퍼티를 추가해보자!

 

index.html

<div class="demo" :class="boxAClasses"></div> <!--class를 boxAClasses에 바인딩-->

 

app.js

Vue.createApp({
 computed: {
  boxAClasses(){
   return {active: this.boxASelected} //Vue앱내부이므로, this를 붙여야한다.
  }
 }
})

 

 

복잡한 동적 클래스코드가 많으면 유용한 기능이다.

true/false만 참조하는게 아니라, if문같이 더 복잡한 검사를 하거나 여러 객체를 반환하는 경우 등 복잡한 동적클래스 코드가 많을 경우, computed를 이용하는건 유용하다.

 

 

선택사항이다.

동적 스타일링 시, 코드가 너무 복잡하지 않으면 굳이 computed 프로퍼티를 사용하여 class를 추가할 필요는 없다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.