Vue 반복문 v-for

HTML을 짜다보면 비슷한 <div> 이런게 수백번 출몰하지 않습니까.

그걸 보고 있으면 비슷한 <div>들을 간단하게 for 반복문 같은 걸로 축약하고 싶은 충동이 들지 않습니까.

리액트나 Vue를 쓰면 가능합니다. 그리고 그런 장점 때문에 리액트와 Vue를 쓰는겁니다. 

 

하지만 for, map, forEach 이런 문법 배우다 포기하셨다면 

Vue 반복문은 100배 쉬우니 걱정하지 맙시다. 

 

 

 

 

상단 메뉴를 만들어봅시다

 

페이지가 여러개 있는 것은 아니지만 심심하니 상단메뉴를 만들어봅시다.

HTML과 CSS는 다음과 같이 작성합니다.

CSS는 vue파일 하단 <style> 태그 안에 넣으면 됩니다.

 

<div class="menu">
  <a>Home</a>
  <a>Products</a>
  <a>About</a>
</div>

.menu {
  background : darkslateblue;
  padding : 15px;
  border-radius : 5px;
}
.menu a {
  color : white;
  padding : 10px;
}

 

 

 

 

 

 

v-for HTML 반복문

 

가끔 코드를 짜다가 

HTML에 반복되는 부분이 보이면 축약하고 싶은 충동이 듭니다.

이걸 축약하고 싶으면 v-for을 쓰면 됩니다. 

v-for쓰시면 원하는 만큼 HTML 태그를 복붙할 수 있습니다. 

 

 

예를 들어서 위에서 작성했던 <a>태그 3개를

한줄 컷으로 생성하는 마법을 보여드리겠습니다. 

<div class="menu">
  <a v-for="작명 in 3" :key="작명">Home</a>
</div>

 

1. 원하는 태그에 v-for="작명 in 반복할횟수" 를 적습니다.

2. 그리고 센스있게 :key="작명" 이것도 추가해줍니다.

그럼 이 HTML 태그는 내가 원하는 만큼 반복생성됩니다.

위의 예제는 Home이라는 a태그가 3개나 생성되겠네요. 

 

작명은 아무렇게나 하시면 됩니다. 변수하나 작명하는 겁니다. 

:key 속성은 반복문돌릴 때 꼭 필요합니다. 반복한 요소들을 각각 구분짓기 위한 속성입니다. 

 

 

 

 

 

v-for HTML 반복문2

 

v-for 반복문을 사용할 때 array, object 데이터를 집어넣을 수도 있습니다. 

예를 들어서 array 자료를 하나 만들어봅시다. 데이터로 저장해두십시오. 

 

data(){
  return {
    메뉴들 : ['Home', 'Shop', 'About']
  }
}

그럼 이제 메뉴들 이라는 데이터로 반복문을 돌릴 수도 있다는 겁니다.

 

 

 

<div class="menu">
  <a v-for="작명 in 메뉴들" :key="작명">Home</a>
</div>

아까랑 사용하는 법은 똑같은데 반복시킬 횟수 적는 란에다가 array 자료를 집어넣을 수 있습니다.

이 경우

1. 메뉴들안의 자료 갯수만큼 반복됩니다.

2. 작명한 변수는 반복될 때마다 메뉴들 안에 있던 자료들이 됩니다.

예를 들어서 작명한 변수는 출력해보면 1회 반복시엔 'Home' 2회 반복시엔 'Shop' 이렇게 변한다는 겁니다. 

 

 

<div class="menu">
  <a v-for="작명 in 메뉴들" :key="작명"> {{ 작명 }}</a>
</div>

그래서 작명한 변수를 저기 실제로 출력해보면 (데이터바인딩해보면) 진짜 그렇죠?

<a>태그가 3번 생성되는데 생성될 때마다 {{작명}} 부분은 차례로

Home이 되고 Shop이 되고 About이 됩니다.

 

 

 

그래서 밑에 있는 array, object 데이터 안에 있던 자료들을

하나씩 HTML로 만들어서 보여주고 싶을 때도 v-for을 쓰시면 유용합니다.

 

 

 

 

 

v-for 안에 변수는 2개까지 작명이 가능합니다.

 

<div class="menu">
  <a v-for="(작명,i) in 메뉴들" :key="i"> {{ 작명 }}</a>
</div>

() 소괄호를 여시면 작명을 두개까지 허용해줍니다.

첫째 작명한건 아까 설명했던 array안의 데이터가 되는 것이고

둘째 작명한건 0, 1, 2 .. 이런 식으로 1씩 증가하는 정수가 됩니다.

반복 횟수를 알려주는 숫자라고 보시면 되겠습니다.

 

그래서 i는 출력해보시면 반복될 때마다 0, 1, 2.. 이렇게 변할걸요

그리고 이걸 보통 관습적으로 :key 안에 집어넣습니다. 

 

 

 

 

그래서 결론은 HTML 복붙하기 힘들면 쓰시길 바랍니다.

아니면 혹은 HTML을 데이터 갯수만큼 자동으로 생성하고 싶으면 쓰십시오.