바인딩1 [Vue.js] HTML 요소의 클래스(class)를 동적으로 바인딩하기 css를 하다보면 하나의 HTML요소에 상황에 따라 다른 스타일을 적용해 주어야 할 때가 있다. 예를 들면 클릭 된 탭이 A냐 B냐에 따라 색상을 변경해 준다든가, 높이를 다르게 설정한다든가 하는 경우이다. :class 디렉티브 이런경우에는 :class 디렉티브를 사용해주면 된다. :class 디렉티브는 HTML요소의 클래스를 동적으로 바인딩하는데 사용된다. 삼항연산자를 이용하여 tabs가 template인 경우에는 aTemplateClass 클래스가, tabs가 template이 아닌 경우에는 bTemplateClass 클래스가 적용되게 해준다. 그 후에는 태그에 원하는 스타일을 지정해주면 된다. 사용자가 화면에서 탭을 클릭하면 tabs의 데이터가 변경됨에 따라 클래스를 동적으로 바인딩 할 수 있다. 2023. 10. 12. 이전 1 다음 728x90
