Portfolio

v-if, v-else-if, v-else 디렉티브로(셀렉터 속성으로 사용) 조건부 렌더링을 할 수 있다

값이 truly면 해당 요소 출력, 아니면 출력하지 않고 다음 조건(v-else-if나 v-else)을 확인
세 요소(혹은 두 요소)는 꼭 붙어서 연달아서 사용해야 한다
특정 셀렉터 대신에 template이라는 것으로 조건부 렌더링을 하면, 해당 셀렉터는 렌더링 되지 않고 내부 자식 셀렉터들만 렌더링 됨


<div id="app">
        <h1 v-if="if1">Hello First</h1>
        <h1 v-else-if="if2">Hello 2</h1>
        <template v-else-if="if3"> //조건이 truly라서 렌더링 되면 자식인 h1, h2만 보여짐
					<h1>Hello3</h1>
					<h2>teeemppplattee</h2>
				</template>
        <h1 v-else="if4">Hello Last</h1>
    </div>
    <script>
        const app = {
            data() {
                return {
                    if1: true, //truly, Hello First가 출력
                    if2: false, //falsy
                    if3: 0, //falsy
                    if4: '', //falsy
                }
            }
        }

        const vm = Vue.createApp(app).mount('#app')
    </script>

v-show vs v-if

⇒ 둘 다 값이 truly면 해당 요소를 보여주고 falsy면 보여주지 않는데, falsy일 때 미세한 차이가 있다

v-if : falsy일 때 해당 요소를 아예 렌더링 하지 않는다.(그 자리는 주석이 표시됨)
v-show : falsy일 때 셀렉터의 style 속성이 추가되어 display가 none이 된다.

v-if는 초기 렌더링 비용이 적고, v-show는 전환 비용이 적다.

v-show만 쓰면 초기에 잠깐 컴파일 되지 않은 {{값}}이 화면에 그대로 보여질 수 있다.

⇒ 그래서 v-show는 보통 v-cloak와 함께 쓴다

v-cloak : 컴포넌트의 인스턴스가 컴파일이 이 다 되면 사라지는 디렉티브
style 태그 안에서 v-cloak 속성의 스타일을 display:none으로 선언 ⇒ 인스턴스가 컴파일 되기 전까지는 절대 보여지지 않고, 컴파일이 완료 되면 v-show 값을 따르게 된다


<style>
    [v-cloak] { //[css] 속성명으로 스타일을 지정할 땐 '[속성명] {}' 형태로 선언
        display: none;
    }
</style>
<div id="app">
    <h1 v-show="isShow" v-cloak>{{msg}}</h1> //렌더링이 되면 v-clock은 사라짐
</div>
<script>
    const app = {
        data() {
            return {
                msg: 'SHOW',
                isShow: true
            }
        }
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

v-if와 v-for를 같이 쓰지 않는 것이 좋다.

만약에 쓴다면 v-for를 가진 셀렉터를 template으로 해주는 방법을 권장
(참고) v-if가 v-for보다 더 높은 우선순위를 갖는다


<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

조건부 렌더링