Vue 반복문 v-for

1. 반복에 사용할 데이터 만들기

 data() {
    return {
      menu_list: ['맛있는 붕어빵', '국물이 맛있는 오뎅', '매운맛 떡볶이'],
      price: [6000, 2000, 10000]
    }
}

 

2. v-for 반복문 사용하기

 <div class="menu" v-for="i in num" :key="n">
   내용
  </div>

 

사용 예시 1)

<template>
  <div class="menu" v-for="(n, i) in 3" :key="n">
    <p>{{ menu_list[i] }}</p>
    <p> {{ price[i] }} 원</p>
  </div>
</template>

 

사용예시 2)

<template>
  <div class="menu" v-for="(list, i) in menu_list" :key="i">
    <p>{{ list }}</p>
    <p> {{ price[i] }} 원</p>
  </div>
</template>

 

3. 최종 코드

<template>
  <div class="menu" v-for="(list, i) in menu_list" :key="i">
    <p>{{ list }}</p>
    <p> {{ price[i] }} 원</p>
  </div>
</template>

<script>


export default {
  name: 'App',
  data() {
    return {
      menu_list: ['맛있는 붕어빵', '국물이 맛있는 오뎅', '매운맛 떡볶이'],
      price: [6000, 2000, 10000]
    }
  }
}
</script>

<style>
.menu {
  margin-top: 20px;
  width: 180px;
  background: bisque;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}
</style>