Vue 리스트 랜더링(v-for)

 

배열 데이터는 v-for 디렉티브를 이용해서 바인딩 할 수 있다. 형식은,

v-for="(item, index) in items"

 

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>가격</th>
          <th>배송료</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="i" v-for="(product, i) in productList">
          <td>{{ product.pname }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.delivery_price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        {"pname":"사과", "price":1000, "delivery_price":2000},
        {"pname":"수박", "price":8000, "delivery_price":2000},
        {"pname":"참외", "price":3000, "delivery_price":2000},
        {"pname":"바나나", "price":2000, "delivery_price":2000},
        {"pname":"체리", "price":10000, "delivery_price":2000}
      ]
    };
  }
}
</script>

<style scoped>
  table {
    width:100%;
  }
  td, th {
    border: 1px solid grey;
    text-align: left;
    padding: 8px
  }
</style>