SIR

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

퍼블리셔팁

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

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

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

본문

조건부 렌더링 3
#key를 이용한 재사용 가능한 엘리먼트 제어

 

Vue는 가능한 한 효율적으로 엘리먼트를 렌더링하려고 시도하며 종종 처음부터 렌더링을
하지 않고 다시 사용합니다. Vue를 매우 빠르게 만드는데 도움이 되는 것이 
이외에 몇가지 유용한 이점이 있습니다. 예를 들어 사용자가 여러 로그인 유형을
트랜지션할 수 있도록 허용하는 경우입니다. 

<template v-if="loginType === "username">
    <label>사용자 이름</label>
    <input placeholder="사용자 이름을 입력하세요">
</template>
<template v-else>
    <label>이메일</label>
    <input placeholder="이메일 주소를 입력하세요">
</template>

위 코드에서 loginType을 바꾸어도 사용자가 이미 입력한 내용은 지워지지 않습니다.
두 템플릿 모두 같은 요소를 사용하므로  <input>은 대체되지 않고 
단지 placeholder만 변경됩니다. 


이것은 항상 바람직하지는 않습니다. 때문에 "이 두 엘리먼트는 완전히 별개이므로 다시 사용하지 마십시오"
라고 알리는 방법을 제공합니다. 
유일한 값으로 key 속성을 추가하십시오
<template v-if="loginType === 'username'">
    <label>사용자 이름</label>
    <input placeholder="사용자 이름을 입력하세요" key="username-input">
</template>

<template v-else>
    <label>이메일</label>
    <input placeholder="이메일 주소를 입력하세요" key="email-input">
</template>

이제 트랜지션 할 때마다 입력이 처음부터 렌더링됩니다. 

<label>엘리먼트는 key속성이 없기 때문에 여전히 효율적으로 재사용 됩니다.

추천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