v-for반복문

vue에서의 반복문은 v-for 굉장히 간단하다. 반복할 태그안에 v-for="작명 in 반복할수"를 적어주면 된다. 그리고 그 옆에 :key="작명"을 적어주면 된다.

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

이렇게 적어주면 생성된다. 근데 이러면, Home만 3개가 생성되므로,

data에 오브젝트데이터를 넣어서 반복문에 오브젝트를 넣어 오브젝트 자료의 갯수만큼 반복하게 해주면 된다.

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

 data() {//데이터 보관함
    return {
      메뉴들 : ['Home','Shop', 'About'],
      products : ['역삼동원룸', '천호동원룸', '마포구원룸'],
      prices : [50, 60, 70]
    }
  },

이렇게, 오브젝트 이름을 써주면 작명한 i가 오브젝트의 데이터가 된다. 따라서 {{ a  }}라고 써주면 오브젝트내의 갯수만큼 오브젝트 자료가 하나씩 나타나게 된다.

여기서 key의 용도는 반복문을 쓸 때 꼭 써야하는데 각각을 구분하는 unique한 문자를 넣어주면 된다.