vue - 조건에 따른 style class 주기

프로젝트를 진행중  데이터에 따라 스타일을 다르게 줘야할 경우가 있었다. 나중에도 참고하기 위하여 기록을한다.

예를들어 아래 이미지와 같은 경우이다. 두 리스트는 같은 컴포넌트이며, 데이터가 방문알림 or 입찰알림에 따라 텍스트 색이 달라야했다.

 

이를 구현하는 방법은 검색결과 생각보다 간단하였다. 아래와같이 class에 조건을 주면 간단히 구현되었다.

noticeName이라는 변수의 값에 따라 다른 스타일을 적용하는 것이다.