Vue 반복문 v-for

 

Nav바 만들기

 

App.vue:

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

 

반복되는 a 태그에 내용을 채울 때,

 

App.vue:

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

<script>
export default {
  name: 'App',
  data(){
    return {
      menus : ['Home', 'Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸']
    }
  },
  components: {
  }
}
</script>

 

<태그 v-for="작명 in 반복횟수(or 데이터)" :key="작명">
>>> :key=""를 안 쓰면 에러 남

<태그 v-for="(a, i) in menus" :key="i">{{a}}</a>
>>> 변수 작명 2개까지 가능
>>> 왼쪽 변수는 array 내의 데이터
>>> 오른쪽 변수는 1씩 증가하는 정수

 

 

아래 둘은 같다

<div v-for="(a, i) in products" :key="i">    
    <h4>{{products[i]}}</h4>
    <p>50 만원</p>
</div>

###################

<div v-for="(a, i) in products" :key="i">    
    <h4>{{a}}</h4>
    <p>50 만원</p>
</div>

 

자료 안의 데이터 갯수만큼 반복된다

 

작명한 변수는 데이터 안의 자료가 된다

 

:key=" "의 용도:

• 반복문 쓸 때 꼭 써야한다
• 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용한다

 

 

---

 

참고

https://www.youtube.com/watch?v=T4N9wjx7_E4&list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ-&index=4