[Vue] 태그(Class 등) 및 속성 중첩 및 여러개 조건문 걸기

안녕하세요.

 

오늘은 [Vue] 태그(Class 등) 및 속성 중첩 및 여러개 조건문 걸기에 대해 알아보려고 합니다.

 

아래의 조건식이 있습니다.

 

<div :class="[test ? (test2 ? 'test2' : (test3 ? 'test3' : 'test')) : ''] && [data === 'air' ? 'air' : '']"></div>

조건식을 해석하자면 div에 클래스를 입력하고 싶을 때 삼항연산자를 통해 클래스 하나를 받고 또 다른 데이터가 참일때 클래스를 하나 더 받겠다라는 뜻 입니다.

 

e.g)

1. test가 true라면 (test2 ? 'test2' : (test3 ? 'test3' : 'test')) -> test2가 true라면 'test2'라는 클래스가 div에 입력이 되게 됩니다.

2. test가 true라면 (test2 ? 'test2' : (test3 ? 'test3' : 'test')) -> test2가 false라면 (test3 ? 'test3' : 'test') -> test3가 true라면 'test3'라는 클래스가 div에 입력이 되게 됩니다.

3. test가 true라면 (test2 ? 'test2' : (test3 ? 'test3' : 'test')) -> test2가 false라면 (test3 ? 'test3' : 'test') -> test3가 false라면 'test'라는 클래스가 div에 입력이 되게 됩니다.

4. test가 false라면 ''라는 클래스가 div에 입력이 되게 됩니다. (클래스가 없는 상태)

5. data가 'air'라는 값으로 들어오게 된다면 'air'라는 클래스가 div에 입력이 되게 됩니다.

6. data가 'air'라는 값을 제외한 나머지 값이 들어오게 된다면 ''라는 클래스가 div에 입력이 되게 됩니다. (클래스가 없는 상태)

 

1과5번의 상황이 발생하게 된다면 <div class="test2 air"></div>로 클래스가 적용이 됩니다.

3과6번의 상황이 발생하게 된다면 <div class="test"></div>로 클래스가 적용이 됩니다.

 

이런식으로 ["조건문"] && ["조건문"]을 입력하게 된다면 클래스를 여러개 붙일 수 있습니다.

 

e.g) ["조건문"] && ["조건문"] && ["조건문"] && ["조건문"] 이런 식으로 클래스를 여러개 넣고 싶다면 이렇게 하시면 될 것 같습니다.

 

이렇게 [Vue] 태그(Class 등) 및 속성 중첩 및 여러개 조건문 걸기에 대해 알아보았습니다.

 

질문 사항이나 해당 게시글에 대한 수정 사항이 필요한 것 같으면 댓글로 남겨주시면 감사하겠습니다.

 

감사합니다.