Vue) 02. v-for 반복문..

Vue의 반복문은 React 처럼 여러방법이 존재하지 않고 오로지 v-for이라는 반복문만 존재한다.

• 이러한 점 중 하나가 Vue의 장점이다. (협업에서 코드의 통일성)

사용법)

메뉴바를 만들 때, a태그가 반복되는 것을 예제로 v-for문을 써보려고 한다.

아래의 코드와 같이 react와 달리 아주 간단하게 반복문을 사용할 수 있는데,

기본적인 문법은 v-for = "??? in ???" :key="???"이다.
인자는 두개까지 받을 수 있고, key는 각 반복되는 요소의 고유의 값이라고 생각하면 된다.

• v-for = "요소의 이름 작명 in 몇번 반복할지" :key="키값"

소스코드 및 해석)

el은 menus 데이터의 각 요소 하나하나가 되고, index는 인덱스 값이, in menus의 menus는 콧수염을 사용하지 않아도 되며, key값은 인덱스 값으로 설정해 주었다.

  <div class="menu">
    <a v-for="(el, index) in menus" :key="index">{{ el }}</a>
  </div>

export default {
  name: "App",
  data() {
    return {
      price1: 60,
      price2: 70,
      price3: 100,
      products: ["역삼동원룸", "천호동원룸", "마포구원룸"],
      
      // 메뉴바에 사용 할 반복문 배열!
      menus: ["Home", "Products", "About"],
    };
  },
  components: {},
};

출력 결과)