v-show는 시각적으로만 보이지 않게, v-if는 DOM에서 완전히 제외된다.
[Vue] v-show와 v-if의 차이
[Vue] v-show와 v-if의 차이
1. v-show, v-if의 역할과 차이
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue v-show와 v-if의 차이</title>
</head>
<body>
<div id="app">
<div id="show">
show
<!-- v-show로 설정된 요소 -->
<div v-show="false">v-show를 사용하여 보이지 않게 처리된 요소</div>
</div>
<div id="if">
if
<!-- v-if로 설정된 요소 -->
<div v-if="false">v-if를 사용하여 보이지 않게 처리된 요소</div>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<script type="text/javascript">
const vm = Vue.createApp({
name: "App",
}).mount("#app");
</script>
</body>
</html>
2. 언제 사용하는가
- 렌더링 여부가 자주 변경되는 요소 (예외적으로 사용) e
- x) 체크 박스 값에 따라 추가로 입력해야 하는 input
v-if
- 렌더링 여부가 자주 변경되지 않는 대부분의 요소
- ex) 언어 설정에 따라 다르게 렌더링되는 요소
'vue > 기초 공부' 카테고리의 다른 글
| [Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model) (0) | 2024.04.29 |
|---|