v-if와 v-for

이번 단원에서는 Vue에서 if와 for를 사용하는 방법에 대해 배웠다. 일단 문법은 다른 언어들과 같아서 익숙했지만, html 코드 내에 작성하는게 뭔가 맘에 안든다.

 

나는 보통 html에서 태그 속에 뭐 넣는 걸 안좋아하는데 익숙해지면 괜찮아질 것 같기도 하다. 암튼 뭐 되게 간결하고 사용법도 쉽고, Js에서 코드 길게 안짜도 편리하다는 점은 정말 유용하다. 

---

v-if

뷰에서 사용하는 if 문이다. html 태그 내에서 사용하며, 큰따옴표 안에 Js 코드를 작성한다. 아래는 goals라는 배열이 비어있다면 해당 텍스트를 나타내는 코드이다. 

<p v-if="goals.length === 0">목표가 설정되지 않았습니다. 목표를 설정해주세요.</p>

 

v-else

뷰에서 사용하는 else이다. if 바로 아래에서 사용해야 하며, 중간에 다른 태그가 들어가면 실행되지않는다. 아래 코드는 goals 배열이 0이 아니라면 Goal 이라는 텍스트가 리스트 요소로 출력된다. 

<p v-if="goals.length === 0">목표가 설정되지 않았습니다. 목표를 설정해주세요.</p>
// 이 사이에 뭐가 들어가면 안된다.
<ul v-else>
  <li> Goal </li>
</ul>

 

v-for

뷰에서 사용하는 for문이다. 마찬가지로 기존 for 문과 유사하게 사용한다. 

<li v-for="(i) in goals">
  {{ i }} 
</li>

위와 같이 사용한다면 goals 배열에 있는 요소(i)를 출력한다. 

 

1) 요소의 인덱스 출력하기

<li v-for="(i,idx) in goals">
  {{idx}}. {{ i }} 
</li>

괄호안에 다른 변수와 함께 사용한다면 해당 요소의 인덱스를 가져올 수 있다. 이렇게 작성하면 "0. 뷰 공부하기" 이런 결과를 얻을 수 있다. 

 

2) 객체에 루프 걸기

<ul>
  <li v-for="i in {name: 'Jaehwi', age: 25}">
    {{ i }}
  </li>
</ul>

 

이렇게 사용한다면 '값' 만 출력된다. (Jaehwi, 25) 하지만 이전에 인덱스를 출력했을 때 처럼 변수를 하나 추가해준다면 키를 뽑을 수 있다. 

<li v-for="(i,key) in {name: 'Jaehwi', age: 25}">{{key}}: {{ i }}

 

3) 숫자에 루프 걸기

<li v-for="i in 10"> {{ i }} </li>

이렇게 숫자에 루프를 걸 수도 있다. 그러면 i는 1부터 해당 숫자까지 출력한다.