![[Vue] class 동적 바인딩](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUKCtm%2Fbtq9NRnuvDW%2F4PtnddYNVHkzrhQw2ztvr1%2Fimg.png)
개발노트/Vue2020. 11. 4. 22:35[Vue] class 동적 바인딩
Class 동적 바인딩 Vue로 Front 개발을 하다 보면 동적으로 Class를 추가 또는 삭제를 해야 될 때가 있다. JQuery는 잘모르지만 JQuery에서 addClass(), removeClass()와 비슷한 개념 이다. 딱히 어렵지 않아 예제를 보면 쉽게 이해할 수 있다. 문법 :class="{ '클래스이름' : '조건' }" 조건이 true경우 클래스이름이 바인딩 되고 false경우 바인딩된 클래스이름이 제거 된다. 기초 사용법 Class Bind 바인딩 👉 isBind값이 true경우 red클래스가 바인딩 되어 스타일이 적용되고 false경우 red클래스가 바인딩에서 해제되어 적용된 스타일이 사라진다. red는 아래 style에 정의 되어 있다. 👉 버튼을 클릭하면 setBind()가 실행..