본문 바로가기

개발/Vue

[Vue] v-if 와 v-show 차이점

반응형

v-if:  조건을 만족하지 못하는 요소는 dom레벨에서 제거됨. 

자주 변경되지 않는 경우에 v-if를 사용하는게 좋다.

 

v-show: 조건을 만족하지 못하는 요소는 display:none; 스타일이 적용됨.

스타일만 변경됐을 뿐 눈에보이지 않더라도 항상 렌더링되고 dom에 남아 있다. 

조건에 따라 자주 변경되는 버튼 같은 경우에는 v-show를 사용하는게 좋다.

 

<template>태그에 v-if 가능 , v-show 불가능

 

 

반응형