v-for 반복문

v-for 반복문

1. v-for 반복문

• 이번엔 v-for 반복문에 대해 배워봅시다.
• #1. 바로 실습으로 들어갑니다. App.vue에 들어가 다음과 같이 입력합니다.

<template>
  <div class="menu">
    <a>Home</a>
    <a>Products</a>
    <a>About</a>
  </div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <div>...</div> -->
</template>

// <script>...</script>

<style>
/* #app {...} */
.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: #fff;
  padding: 10px;
}
</style>

 

    → 브라우저를 실행하면, 다음과 같이 나오게 됩니다.

 

• 이렇게 코드를 짜다보면, 반복적인 HTML 태그가 나옵니다. 그것을 간단하기 위해 v-for 반복문을 사용합니다.
• v-for 반복문은 다음과 같이 사용합니다.

<태그 v-for="작명 in 몇회" :key="작명">

 

• #2. 그러면 방금 코드를 다음과 같이 수정하여, a 태그를 이용할 수 있습니다.

<template>
  <div class="menu">
    <a v-for="Home in 3" :key="Home">Home</a>
  </div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <div>...</div> -->
</template>

// <script>...</script>
// <style>...</style>

 

    → 브라우저를 보면, Home 메뉴가 3개 생긴 것을 확인할 수 있습니다.

 

• #3. 이제 배열과 v-for 반복문을 사용해 다음과 같이 입력하여, 메뉴를 생성할 수 있습니다.

<template>
  <div class="menu">
    <a v-for="menu in navs" :key="menu">{{ menu }}</a>
  </div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <div>...</div> -->
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      navs : ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

// <style>...</style>

 

• #4. 변수 작명은 2개 까지 가능하여, 다음과 같이 사용할 수 있습니다.

<template>
  <div class="menu">
    <a v-for="(menu, i) in navs" :key="i">{{ menu }}</a>
  </div>
  <img alt="Vue logo" src="./assets/logo.png" />
  <!-- <div>...</div> -->
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      navs : ["Home", "Shop", "About"],
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

// <style>...</style>

 

• #5. v-for문을 사용해 다음과 같이 입력하여, 코드를 축소화 할 수 있습니다.

<template>
  <div class="menu">
    <a v-for="(menu, i) in menuData" :key="i">{{ menu }}</a>
  </div>
  <div  v-for="(product, i) in productData" :key="i">
    <h4>{{ productData[i] }}</h4>
    <p>50 만원</p>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      // 데이터 보관 (데이터는 object 자료형으로 저장)
      menuData : ["Home", "Shop", "About"],
      productData: ["역삼동원룸", "천호동원룸", "마포구원룸"],
    };
  },
  components: {},
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu {
  background: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: #fff;
  padding: 10px;
}
</style>

 

3. 정리하며

• 지금까지 v-for 반복문에 대해 알아보았습니다.
• 다음 시간엔 이벤트 핸들러에 대해 알아보겠습니다.

이벤트 핸들러 (Event Handler)

 

※ 코딩애플님의 강의를 참고하였습니다.

 

※ Git 주소

v-for 반복문 · NewBean0312/vue-study-2024-03@1fd64ce