# v-if
표현식 값의 true/ false에 따라 요소를 조건부로 렌더링
v-else도 같이 쓸 수 있음
한번 써보기
const isSeen = ref(true)
<p v-if="isSeen">true일때 보여요</p>
<p v-else>false일때 보여요</p>
<button @click="isSeen = !isSeen">토글</button>
v-else-if도 사용 가능
<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>
v-if는 directive이므로 단일 요소에만 연결 가능
여러개에 쓰려면 template요소에 v-if사용
<template v-if="name === 'Cathy'">
<div>Cathy입니다</div>
<div>나이는 30살입니다</div>
</template>
template 요소가 뭔데?
- 페이지가 로드될 때 랜더링되지 않았지만 JavaScript를 사용하여 나중에 문서에서 사용할 수 있도록하는 HTML을 보유하기위한 메커니즘
- 보이지 않는 wrapper역할을 함
근데, 비슷한 녀석이 하나 더 있음
# v-show
표현식 값의 true, false에 따라 요소의 가시성을 전환(visibility)
아까 v-if는 렌더링을 결정했었음
const isShow = ref(false)
<div v-show="isShow">v-show</div>
이런식으로 하면 당연히 안보임
그런데 개발자도구로 보면
display:none으로 되어있음 == 랜더링은 진행함
# 둘이 비교
- v-if (Cheap initial load, expensive toggle)
- 초기 비용이 false면 아무 작업도 없음
- 토글이 힘들다
- v-show(Expensive initial load, cheap toggle)
- 초기 조건에 관계없이 항상 렌더링
- 초기 렌더링이 비용이 높다
그래서, toggle이 거의 없다면 v-if, toggle이 자주 일어난다면 v-show
+ elseif나 else를 사용한다면 v-if
'FrontEnd > Vue' 카테고리의 다른 글
[Vue] Watchers (0) | 2023.11.06 |
---|---|
[Vue] List Rendering(v-for) (0) | 2023.11.06 |
[Vue] Computed 속성 (0) | 2023.11.06 |
[Vue] TodoList 만들어보기 (0) | 2023.11.02 |
[Vue] Form Input Bindings (0) | 2023.11.02 |
댓글