[Vue] 반복문 v-for

v-for

v-for=”작명 in 몇번반복” :key=”작명”

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

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

data를 활용한 v-for

3의 자리에는 데이터를 넣을 수가 있음
메뉴들의 갯수만큼 반복됨 작명한 변수는 데이터 안의 자료가 됨

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

export default {
  name: 'App',
  data(){
    return {
      메뉴들: ['Home', 'Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸']
    }
  },
  components: {
  }
}

:key=”i”

의 용도는 반복문으로 생성한 요소들을 구분하기 위한 속성
(a, i) 에는 각각 item, idx가 들어간다.

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

예제

<template>
  <div class="menu">
    <a v-for="(a,i) in 메뉴들" :key="i">{{a}}</a>
  </div>
  <div v-for="(a,i) in products" :key="i">
    <h4>{{a}}</h4>
    <p>40 만원</p>
  </div>
</template>

export default {
  name: 'App',
  data(){
    return {
      // 데이터 보관함
      // 데이터는 object 자료형으로 저장한다. {자료이름:자료내용}
      메뉴들: ['Home', 'Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸']
    }
  },
  components: {
  }
}