728x90
728x90
v-show
v-show를 사용하면 조건의 true/false와 관계 없이 해당 요소가 렌더링되지만,
false일 경우 'display:none'으로 설정되어 숨김 처리되고, 다시 true로 변경된다면 'display:none'이 해제된다.
<!-- v-show="조건"-->
<button type="button" class="sch_close_btn" v-show="searchKeyword.trim() !== ''"></button>
v-if
v-if를 사용하면 조건이 true인 경우에만 해당 요소가 렌더링된다.
만약 조건식의 결과가 false였다가 다시 true로 변경되면 해당 요소를 재렌더링하는 방식이다.
<!-- v-if="조건" -->
<a :href="HOMEPAGE_URL" class="brand_url" v-if="HOMEPAGE_URL !== null">홈페이지 →</a>
<a :href="SNS_URL" class="brand_url" v-if="SNS_URL !== null">인스타그램 →</a>
따라서, 조건식의 결과가 변경될 가능성이 있는 경우에는 v-if보다는 v-show를 사용하는 것이 좋다.
320x100
반응형
'Vue.js' 카테고리의 다른 글
| [Vue.js] nextTick : 재렌더링이 완료될 때까지 기다린 후 실행하기 (0) | 2024.05.17 |
|---|---|
| [Vue.js] @error : 이미지 에러 발생 시 기본 이미지로 표시하기 (0) | 2024.05.17 |
| [Vue.js] v-bind : 유동적으로 class, id 지정하기 (0) | 2024.05.17 |
| [Vue.js] v-cloak : 렌더링 되기 전까지 숨김 처리하기 (0) | 2024.05.14 |
| [Vue.js] 기존 프로젝트에 Vue.js 3 추가하기 (0) | 2024.04.29 |