[Vue] v-bind:class 객체로 사용하기
개요- 환경설정node 18.14.0 / vue3 / vite 과제형 프로젝트를 진행하면서 v-bind:class를 객체형태로 사용하고 조건식을 속성값으로 사용하는 방법을 쓰게 되었다.문제제기) input type="email" 에서 실시간 value값이 설정한 조건에 부합하는 경우 원하는 클래스명이 붙도록 하는 로직구현이 필요 input에 실시간으로 입력되는 값을 캐치해야하므로 watch() 속성에 구현 [과정]1. true, false값에 따라 구현되는 요소는 기존에 클래스명이 있다.2. 삼항연산자를 통해서는 한가지 조건만 충족할 수 있다. ( 기존에 가진 클래스명 / 조건에 부합하는 경우 ) -> 조건에 부합하지 않는 경우를 를 구현할 수 없음3. v-bind:class ..
Vue
2025. 3. 8. 15:12
