728x90
반응형
v-if
: 표현식 값의 T/F를 기반으로 요소를 조건부로 렌더링
- 'v-else' directive를 사용하여 v-if에 대한 else 블록을 나타낼 수 있다.
<body>
<div id="app">
<p v-if="isSeen">true일때 보여요</p>
<p v-else>false일때 보여요</p>
<button @click="isSeen = !isSeen">토글</button>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const isSeen = ref(true);
return {
isSeen,
};
},
});
app.mount("#app");
</script>
</body>
- 'v-else-if' directive를 사용하여 v-if에 대한 else if 블록을 나타낼 수 있다.
<body>
<div id="app">
<div v-if="name === 'Alice'">Alice입니다</div>
<div v-else-if="name === 'Bella'">Bella입니다</div>
<div v-else-if="name === 'Cathy'">Cathy입니다</div>
<div v-else>아무도 아닙니다.</div>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const name = ref("Cathy");
return {
name,
};
},
});
app.mount("#app");
</script>
</body>
여러 요소에 대한 v-if 적용
- v-if는 directive이기 때문에 단일 요소에만 연결 가능
- template 요소에 v-if를 사용하여 하나 이상의 요소에 대해 적용할 수 있다. (v-else, v-else-if 모두 가능)
<body>
<div id="app">
<template v-if="name === 'Cathy'">
<div>Cathy입니다</div>
<div>나이는 30살입니다</div>
</template>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const name = ref("Cathy");
return {
name,
};
},
});
app.mount("#app");
</script>
</body>HTML <template> 요소
- 페이지가 로드될 때 렌더링되지 않지만 Javascript를 사용하여 나중에 문서에서 사용할 수 있도록 하는 HTML을 보유하기 위한 메커니즘
- 보이지 않는 wrapper 역할
v-show
: 표현식 값의 T/F를 기반으로 요소의 가시성(visibility)을 전환
- v-show 요소는 항상 렌더링되어 DOM에 남아있다.
- CSS display 속성만 전환하기 때문
<body>
<div id="app">
<div v-show="isShow">v-show</div>
</div>
<script>
const { createApp, ref } = Vue;
const app = createApp({
setup() {
const isShow = ref(false);
return {
isShow,
};
},
});
app.mount("#app");
</script>
</body>
v-if vs v-show
- v-if : 초기 조건이 false인 경우 아무 작업도 수행하지 않음. 토글 비용이 높음
- v-show : 초기 조건에 관계 없이 항상 렌더링. 초기 렌더링 비용이 더 높음
-> 무언가를 매우 자주 전환해야 하는 경우에는 v-show를, 실행 중에 조건이 변경되지 않는 경우에는 v-if를 권장한다!
728x90
반응형
'Frontend > Vue3' 카테고리의 다른 글
| [Vue3] watch (0) | 2024.05.06 |
|---|---|
| [Vue3] 리스트 렌더링 (v-for) (0) | 2024.05.06 |
| [Vue3] Computed Property (0) | 2024.05.06 |
| [Vue3] Form 입력 바인딩 (v-model) (0) | 2024.05.05 |
| [Vue3] 이벤트 핸들링 (v-on) (0) | 2024.05.05 |
