※ v-show VS v-if
| v-show | v-if | |
| false인 경우 | display:none | 엘리먼트 삭제 |
| template 지원 | X | O |
| 렌더링 | 항상 | false인 경우 X |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<h3>v-if VS v-show</h3>
<div v-if="condition">v-if div</div>
<div v-show="condition">v-show div</div>
</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
condition: false
}
});
</script>
</body>
</html>
확인해 보면 v-if는 false인 경우 생성되지 않았고 v-show는 display:none이 적용된 것을 확인해 볼 수 있다.
'Web > Vue.js' 카테고리의 다른 글
| Vue 에서 FontAwesome 사용하기(npm 설치) (0) | 2021.05.21 |
|---|---|
| Vue filter (0) | 2021.05.16 |
| Vue Directives (0) | 2021.05.16 |
| Vue Instance Life Cycle (0) | 2021.05.16 |
| Vue Instance 생성하기 (0) | 2021.05.16 |
