Vue 렌더링 이해하기

이선용·2022년 9월 14일
0

v-for

v-for 기본문법

:key"index" v-for="(별칭, index) in 배열"

참고 : 위 문법에서 :key는 v-bind:key의 약어를 의미함

v-for 예시 1

<template>
<div>
  <select v-model="city">
    <option :value="city.v" :key="i" v-for="(city,i) in options">{{city.t}}</option>
  </select>
</div>
</template>

data() {
    return {
      options: [
        {v: '02', t:'서울'},
        {v: '21', t:'부산'},
        {v: '064', t:'제주'},
      ],
      city: '064' //제주에 초점
    };
  }

v-for 예시 2

<template>
<div>
  <table>
  	    <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>

data() {
    return {
      productList: [
        {product_name: '기계식 키보드', price:25000, delivery_price:5000, category:'전자제품'},
        {product_name: '마우스', price:5000, delivery_price:5000, category:'전자제품'}
      ]
    };
  }

v-if

<template>
<div>
  <h1 v-if="type=='A'">A</h1>
  <h1 v-else-if="type=='B'">B</h1>
  <h1 v-else-if="type=='C'">C</h1>
  <h1 v-else>D</h1>
</div>
</template>

data() {
    return {
     type: 'B'
    };
  }

출력결과 : B

v-show와 v-if의 차이

v-show는 따로 조건문을 둘 수 없으며, false일경우 display:none처리를 하여 화면상에 안보이게 하는것일뿐 렌더링은 작동한다.
반면에 v-if는 조건에 맞지않아 false로 처리될 경우, 렌더링 자체가 작동하지 않는다.
때문에 화면에 가볍게 보였다 안보였다 하는정도라면 v-show를, 여러 조건이 필요한 경우라면 v-if를 사용하는 것이 적절하다.

profile
React, Vue등 여러 라이브러리와 프레임워크를 배우고 활용하기를 좋아하는 주니어 프론트엔드 개발자 입니다. 저에게 흥미가 있거나 궁금한점이 있으신 분들은 글을 남겨주시면 언제든지 응답해드리겠습니다.

0개의 댓글