vue 동적 클래스 적용

:class="{ 'dynamic-class': data.selectedYn }

<div :class="{ 'dynamic-class': data.selectedYn }>
	...
</div>

여기서 의미는:

• dynamic-class: 이 클래스 이름이 조건에 따라 적용
• data.selectedYn: 이 값이 true일 경우 selected-item 클래스가 적용

즉, data.selectedYn가 true이면 해당 요소에 'dynamic-class' 클래스를 추가해서 특정 스타일을 적용할 수 있도록 하는 것

반대로, data.selectedYn가 false이면 해당 클래스는 적용되지 않음.

 

∴ 선택된 항목에만 특정 스타일을 동적으로 적용할 수 있음