Vue 조건문과 반복문

오늘은 Vue에서 조건문과 반복문에 대해서 알아보려고합니다. 

일단 먼저 알아야 될것은 v- 로 시작하는 속성에 대해 알아보려고 합니다.

 

디렉티브와 조건문

보시면 v-if 이런식으로 되어있는데 이것을 디렉티브라고 합니다.

여기서 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 

 

조건문

v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용됩니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다.

 

 

이런식으로 if else를 구성할수 있네요.

스크립트를 보시면 

 

script문

app3라는 돔을 연결 후 awesome속성을 true로 정해주면 Vue is awesome이 출력됩니다.

반대로 false를 써주면 else문이 출력되겠죠. 

 

그리고 하나이상의 엘리먼트에 트랙지션하려면 이런식으로 template 엘리먼트를 생성해 넣어주면됩니다.

template

그리고 예전에는 없었지만 2.1.0+ 버젼부터는 v-else-if가 생겼네요. 

 

else if

else if 문은 이런식으로 사용하시면 될것같습니다. 생각보다 간단하고 깔끔하네요.

 

반복문

v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. 

 

 

HTML코드인 DOM을 보시면 v-for에서 item을 items에서 리스트로 하나씩 가져오네요.

 

DOM

 

스크립트에서 items의 배열에 message에 A,B,C,D를 담았습니다. 

Script

출력

정상적으로 출력되네요. 만약에 리스트에 순번도 같이 넣어주고 싶으시면 v-for안에 index도 같이 추가해주시면 됩니다. 

 

index

출력

이런식으로 응용이 가능하네요 순번이 0 부터 시작하다보니 index에 index+1을 해주면 1부터 시작됩니다.

그리고 in 대신 of 도 가능하네요. 꼭 item in items가 아니라 item of items 도 가능합니다. 

 

이렇게 ( value ,name index ) 로 출력할 수 있습니다. 순서는 변경은 할수 없나보네요. 

 

DOM

 

Script

출력

이런식으로 배열에 담아서 꺼낼시에 객체의 이름도 꺼낼수 있어서 유용할것 같습니다.

오늘은 조건문과 반복문에 대해서 알아봤는데 확실히 유용하기도 하고

굳이 이렇게 해야하나 라는 생각도 반반씩 드네요 ㅋㅋ 다음번엔 Vue인스턴스가 무엇인지 알아봐야겠습니다.