HomeWork

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>

반복문 v-for

Ex) 메뉴바

<template>
  <div class="menu">
    <a>Home</a>
    <a>Product</a>
    <a>About</a>
  </div>
  <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;
}
  .menu {
    background-color: darkslateblue;
    padding: 15px;
    border-radius: 5px;
  }
  .menu a {
    color: white;
    padding: 10px;
  }
</style>

v-for

위의 메뉴바 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>

위와 같이 반복문 v-for을 이용하면 같은 결과를 더 쉽고 빠르게 구현해 낼 수 있다.