리스트 렌더링

다중 데이터 렌더링 하는 경우 v-for를 사용한다.

<template>
  <div>
    <select v-model="city">
      <option :value="city.v" :key="i" v-for="(city, i) in options"> 
      //하나의 배열 데이터, 몇번째 인덱스인지
        {{ city.t }}
      </option>
    </select>
    <table>
      <thead>
        <tr>
          <th>제품명</th>
          <th>제품가격</th>
          <th>배송비</th>
          <th>제품카테고리</th>
        </tr>
      </thead>
      <tbody>
        <tr :key="i" v-for="(product, i) in productList">
          <td>{{ product.product_name }}</td>
          <td>{{ product.price }}</td>
          <td>{{ product.delivery_price }}</td>
          <td>{{ product.category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      options: [
        { v: "02", t: "서울" },
        { v: "21", t: "부산" },
        { v: "064", t: "제주" },
      ],
      city: "064",
      productList: [
        {
          product_name: "기계식 키보드",
          price: 25000,
          delivery_price: 5000,
          category: "전자제품",
        },
        {
          product_name: "마우스",
          price: 9000,
          delivery_price: 5000,
          category: "전자제품",
        },
      ],
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

productList배열의 수만큼 하나하나의 object 데이터를 받아온다.

렌더링

조건에 따라 html 요소를 보여줄지에 대한 여부

if문 v-if, v-else

<template>
  <div>
    <h1 v-if="bRender">
      bRender값이 true이면, h1블록이 화면에 보여지게 됩니다.
    </h1>
    <h1 v-else>bRender값이 false이면, h1블록이 화면에 보여지게 됩니다.</h1>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      bRender: true,
    };
  },

v-show
실제 html 렌더링 되지만, style속성을 통해 display:none 처리를 해줌

• 빈번하게 이벤트 객체를 할 경우는 v-show를 사용
• 한번 렌더링 된다면 v-if를 사용