[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 (또는 :class)를 사용해 클래스이름을 동적으로 할당할 수 있는데, 그 방식 중 하나가 객체형태이다. 

-> 객체 형태는 여러 조건을 동시에 처리할 수 있으며 조건별로 클래스를 적용할 수 있는 유연함이 있다.

4. data() 속성에 데이터를 추가적으로 부여하고 :class를 통해 클래스 이름을 객체형태로 부여한다.

해석) 객체형태에서는 클래스 이름을 객체의 속성명으로 사용하고, 해당 클래스가 적용될지 말지를 결정하는 조건식을 속성값으로 사용한다.

각 클래스의 이름은 객체의 속성명으로 사용 -> 각 클래스 이름에 대응하는 값은 조건식이 된다. 해당 조건식이 true일 경우, 클래스가 적용이 되고 false일 경우 적용되지 않는다.

<div :class="{'클래스명1':조건1, '클래스명2':조건2, '클래스명3':조건3}"></div>

 

 

valid, failed 데이터 속성을 사용

 

input(v)를 통해 들어오는 value값이 emailPattern 조건에 부합하는 경우, valid값은 true가 되고 failed 값의 경우 늘 valid의 값을 부정하므로 value값이 조건문을 부합하지 않는 경우 true값을 반환한다.

 

클래스이름을 객체의 속성명으로 사용 (success, failed)

 

'input-container'은 늘 truer값으로 지정했으므로 기본 클래스명으로 설정했음을 알 수 있다. 

조건식을 속성값이 결정되므로 (조건식이 true일 경우, 클래스가 적용이 되고 false일 경우 적용되지 않는다) valid가 true일 경우, success라는 클래스명이 붙고, valid가 false인 경우 failed가 true값이 되므로 failed라는 클래스명이 붙는다.