조건부 렌더링

v-if

Handlebars와 같은 문자열 템플릿에서는 다음과 같은 조건부 블록을 작성할 수 있습니다.

HTML부분
<!-- Handlebars 템플릿 -->
{{#if ok}}
    <h1>Yes</h1>
{{/if}}

Vue에서는 v-if 디렉티브를 사용하여 같은 결과를 얻을 수 있습니다.

HTML 부분
<h1 v-if="ok">Yes</h1>

v-else와 함께 "else 블록"을 추가하는 것도 가능합니다.

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

JS부분

data:{

ok: true  

}