[Vue.js] Vue 반복문 v-for 사용해보기

💡 실습 포인트!

• 반복문 없이 상단메뉴를 만든 후 v-for 을 사용하여 코드를 수정해보았다.

---

💜 반복문 없이 상단메뉴 만들기

🤍 HTML

<div class="navbar">
    <a>Home</a>
    <a>Rooms</a>
    <a>About</a>
</div>

• 반복문 없이 상단메뉴를 만드는 것이므로 메뉴바가 될 div 태그 안에 a 태그 3개를 넣어 메뉴를 3개 추가해주었다.

---

🤍 CSS

.navbar {
	padding: 15px 0;
	background: #6667AB;
	color: white;
	font-size: 20px;
	border-radius: 5px;
}

.navbar a {
	padding: 5px 10px;
	margin : 0 10px;
}

.navbar a:hover {
	background: white;
	cursor: pointer;
	border-radius: 5px;
	color: #6667AB;
	transition: all 1s;
}

• 그리고 깔끔하게 style 을 입혀주었다.

---

🤍 상단메뉴 미리보기

• 여기까지 하고 나면 위와 같이 심플한 상단메뉴가 완성된다.

---

💜 반복문을 활용하여 상단메뉴 만들기

🤍 v-for HTML 반복문 만들기

<div class="navbar">
    <a>Home</a>
    <a>Rooms</a>
    <a>About</a>
</div>

• 위와 같은 코드는 a 태그가 여러번 반복되므로 v-for 문을 이용하여 축약이 가능하다.

<script>
export default {
	name: "App",
	data(){
		return {
			navbar : ['Home', 'Rooms', 'About']
		}
	}
};
</script>

 

<div class="navbar">
    <a v-for="(menu, i) in navbar" :key="i">{{ menu }}</a>
</div>

• 먼저, 반복할 태그에 v-for 이라는 속성을 넣고 v-for="요소이름 in 숫자혹은data 보관함의데이터" 와 같은 형식으로 코드를 작성해준다.
• 그리고 이런 반복문에는 반복한 요소들을 구분짓기 위한 key 값을 넣어주어야 하므로 :key="유니크한값" 과 같이 추가로 코드를 작성해준다.
• 이렇게 완성된 HTML 태그는 숫자 혹은 data 보관함에 저장된 데이터의 길이만큼 반복생성된다.
• 나의 경우 data 보관함에 저장된 navbar 라는 데이터를 넣어주었기 때문에 navbar 라는 array 자료형의 길이인 3만큼 HTML 태그가 반복생성되는 것이다.
• 그리고 반복문이 반복될 때마다 navbar 라는 array 자료형의 요소 하나하나가 menu 라는 변수가 되는 것이다.
• 그래서 menu 라는 변수를 HTML 내용으로 데이터바인딩하여 출력해보면 반복문이 돌 때마다 Home 이 되기도 하고, Shop 이 되기도 하고 About 이 되기도 하는 것이다.
• 또한 변수 자리에 소괄호를 넣게 되면 변수를 2개까지 만들 수 있다.
• 보통 첫번째로 만든 변수(위 코드에서 menu)는 navbar 라는 array 자료형의 각 데이터가 되는 것이고, 두번째로 만든 변수(위 코드에서 i)는 0, 1, 2... 이런 식으로 1씩 증가하는, 반복횟수를 알려주는 정수가 되는데, 관습적으로 이것을 :key 안에 넣어준다.

---

🤍 상단메뉴 미리보기

• 위와 같이 코드를 작성한 후 저장을 해도 기존에 반복문 없이 작성한 코드와 동일하게 상단메뉴가 만들어진 것을 확인할 수 있다.