[Vue] 조건부 렌더링 v-if, v-show & 반복 렌더링 v-for

vue 를 사용하다보면 같은 컴포넌트 안에서 기획의도나 특정상황에 대하여 조건에 따라 해당 엘리먼트가 보이고 안보이는 상황이 생긴다

v-if 와 v-show 의 차이점은 v-show 는 항상 렌더링 되어 있고 dom에 남아있다. display : none 같은 결과

v-if 기본 사용법

<div v-if="true">HI~</div>
<div v-if="false">Bye</div>

v-if 데이터 값에 따른 조건부 렌더링

<div v-if="isShowElement">Hi</div>

export default{
    data(){
        return {
            isShowElement : true
        }
    }
}

v-else-if, v-else : v-if에 대한 else 블록을 나타낼수도 있다

<div v-if="isShowElement">Hi</div>
<div v-else-if="!isShowElement">Bye</div>

<div v-if=" elementId === 'sayHi' ">Hi</div>
<div v-else-if=" elementId === 'sayBye' ">Bye</div>
<div v-else>see You</div>

export default{
    data(){
        return {
            isShowElement : true,
              elementId : "sayHi",
        }
    }
}

v-show 사용법은 v-if 와 동일

<div v-show="true">Hi~</div>
<div v-show="false">Bye</div>

v-for로 엘리먼트에 배열 맵핑하기

v-for 사용법 배열기반의 리스트 그리기

<ul>
    <li v-for="(product, index) in list" :key="index">
        <p>{{ product.productName }}</p>
        <span>{{ product.price }}</span>
    </li>  
</ul>

export default{
    data(){
        return {
            list : [
              {
                productId : "americano"
                  productName : "아메리카노",
                price : 2500,
              },
              {
                productId : "latte"
                  productName : "라떼",
                price : 3000,
              }
            ]
        }
    }
}