SIR

vue.js 조건부 렌더링2 > 퍼블리셔팁

퍼블리셔팁

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

vue.js 조건부 렌더링2 정보

기타 vue.js 조건부 렌더링2

본문

조건부 렌더링

 

#<template>에 v-if을 갖는 조건부 그룹만들기

 

 

v-if는 디렉티브기 때문에 하나의 엘리먼트에 추가해야 합니다.
하지만 하나 이상의 엘리먼트를 트랜지션하려면 어떻게 해야 할까요?

이 경우 우리는 보이지 않는 레퍼 역할을 하는 <template>엘리먼트에 
v-if를 사용할 수 있습니다.
최종 렌더링 결과에는 <template>엘리먼트가 포함되지 않습니다.

HTML 부분
<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph1</p>
    <p>Paragraph2</p>
</template>


#v-else
v-else 디렉티브를 사용하여 v-if에 대한 "else블록"을 나타낼 수 있습니다.

HTML부분

<div v-if="Math.random() > 0.5">
    이제 나를 볼 수 있어요
</div>
<div v-else>
    이제는 안보입니다.
</div>

#v-else-if
2.1.0버전부터 새롭게 추가됨

v-else-if는 이름에서 알 수 있듯 v-if에 대한 "else if블록" 역할을 합니다. 
또한 여러개를 사용할 수 있습니다.

<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div -v-else-if="type === 'C'">
C
</div>
<div v-else>
    Not A/B/C
</div>
v-else와 마찬가지로 v-else-if 엘리먼트는 v-if 또는 v-else-if엘리먼트 바로 뒤에 와야 합니다.

추천0

댓글 전체

전체 1,214
퍼블리셔팁 내용 검색

회원로그인

커뮤니티 통합 안내 배너

진행중 포인트경매

  1. 참여8 회 시작20.12.02 04:36 종료20.12.09 04:36

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT