Vue 반복문 v-for

v-for 문법을 쓰면 반복이 가능하다.

<template>

 

  <div class="menu">

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

  </div>

</template>

--> aaa in 3 에서 aaa는 내가 정의한 변수 이름이고, 3은 3번 만큼 반복하라는 의미이다.

그런데 이렇게 하면 문제가 생긴다. 똑같은 Home만 3개가 생기는 것, 해결 방법은?

저 3 자리에 내가 정의한 데이터를 넣을 수 있다.

 

export default {

  name: 'App',

  data() {

    return {

      메뉴들 : ['Home', 'Shop', 'About'],

      products : ['역삼동원룸', '천호동원룸', '마포구원룸']

    }

  },

  components: {

  }

}

--> 이렇게 메뉴들을 정의하고

 

  <div class="menu">

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

  </div>

--> 아까 3이 있던 자리에 array/object(자료형)을 집어 넣으면 그 자료안의 데이터 갯수만큼 반복한다.

 

* key의 용도는?

  - 반복문을 쓸 때 꼭 써야한다. 안 그러면 에러가 난다.

  - 반복문 돌린 요소를 컴퓨터가 구분하기 위해 사용한다.

 

<template>

  <div class="menu">

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

  </div>

</template>

--> 변수 작명은 2개까지 가능하다.
      왼쪽 변수는 array 내의 데이터, 오른쪽 변수는 1씩 증가하는 정수