Vue.js - 선택한 Element에 Class Attribute 추가

 

 

 

자바스크립트라면 Element에 addClass나 setAttribute를 줘서 Class Attribute를 Control 할 수 있는 쉬운 방법이 있지만

Vue나 React 같은 경우에는 DOM에 직접적으로 접근하는걸 지양하지 않는 탓에 script 처리를 통해 Attribute를 넣는 다는 것이 참 어렵게 느껴진다.

 

마침 회사에서 개발 도중 이러한 기능을 처리하는 도중에 아주 괜찮은 예제가 있어서 가져와 보았다.

 

 

 

 

 

위 예제는 <li> Element를 클릭하면 background가 Yellow로 바뀌는 예제다.

Background로 설정할 부분에 :class 디렉티브를 쓰고 item.id와 selected로 같으면 class를 적용하는 코드다.

 

클릭은 @click 디렉티브로 클릭이벤트를 받고 seleted를 item.id로 설정해준다.

 

 

 

출처 : https://jsfiddle.net/Herteby/todqxteh/