수

vue.js 조건부 렌더링 v-if

· 2019-01-23 (수) 17:24:52 · 2308

조건부 렌더링

 

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  

}

댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
기타 19-02-04 조회 4,452
기타 19-02-04 조회 6,831
기타 19-01-31 조회 3,036
기타 19-01-31 조회 2,915
기타 19-01-31 조회 2,414
기타 19-01-28 조회 2,845
기타 19-01-28 조회 2,662
기타 19-01-28 조회 2,695
기타 19-01-24 조회 2,669
기타 19-01-24 조회 2,421
기타 19-01-24 조회 2,762
기타 19-01-23 조회 2,309
기타 19-01-23 조회 2,494
기타 19-01-23 조회 2,661
기타 19-01-22 조회 2,754
기타 19-01-22 조회 2,240
기타 19-01-22 조회 2,124
기타 19-01-21 조회 2,605
기타 19-01-16 조회 2,231
기타 19-01-16 조회 1,946
기타 19-01-16 조회 2,153
기타 19-01-12 조회 1,852
기타 19-01-12 조회 2,054
기타 19-01-12 조회 1,775
기타 19-01-11 조회 1,895
기타 19-01-11 조회 1,811
기타 19-01-11 조회 2,105
기타 19-01-10 조회 1,838
기타 19-01-10 조회 2,169
기타 19-01-10 조회 2,168