반복문

html 에서 배열 데이터 바인딩하기

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>{{product[0]}}</h4>
    <p>50 만원</p>
  </div>
  <div>
    <h4>{{product[1]}}</h4>
    <p>60 만원</p>
  </div>
  <div>
    <h4>{{product[2]}}</h4>
    <p>70 만원</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      product : ['성남시', '구리시', '서울'],
    }
  },
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

html과 같이 화면을 구성하다보면 반복되는 태그들이 생긴다.
vue에서의 태그 반복문은 v-for이다.

 

<a v-for="작명 in 횟수" :key="작명"></a>
<a v-for="(작명1, 작명2) in 횟수" :key="작명1"></a>

 

횟수 자리에는 js에 있는 데이터도 넣을 수 있다.
이럴 경우, 자료형 안에 있는 데이터의 갯수만큼 반복한다.
횟수를 숫자로 명시할 때 보다 더 이점이 있다.

작명을 두 개 까지 할 수 있다.
작명 1은 array내의 데이터이고, 작명2는 1씩 증가하는 정수, 즉 array의 인덱스이다.

 

:key=""의 용도
반복문을 쓸 때 꼭 써주어야 한다.
반복문을 돌린 요소를 컴퓨터가 구분할 수 있게 하기 위해 사용

 

<template>
  <div class="menu">
    <a v-for="menu in menus" :key="menu"> {{ menu }}</a>
  </div>
  <div v-for="product in products" :key="product">
    <h4>{{ product.name }}</h4>
    <p>{{ product.price }} 만원</p>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() { 
    return {
      menus : [ 'Home', 'Shop', 'About'], //메뉴 데이터 배열
      products : [ //원룸 상품 데이터 배열
        {name: '역삼동 원룸', price: 50},
        {name: '구리시 원룸', price: 60},
        {name: '영등포 원룸', price: 70},
      ],
    }
  },
  components: {}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.menu {
  background-color: darkslateblue;
  padding: 15px;
  border-radius: 5px;
}

.menu a {
  color: white;
  padding: 10px;
}
</style>