SIR

vue.js Range v-for 와 v-for 템플릿 > 퍼블리셔팁

퍼블리셔팁

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

vue.js Range v-for 와 v-for 템플릿 정보

기타 vue.js Range v-for 와 v-for 템플릿

본문


Range v-for


v-for는 숫자를 사용할 수 있습니다. 이 경우 템플릿을 여러번 반복합니다.
<div>
    <span v-for="n in 10">{{n}}</span>
</div>


v-for 템플릿
템플릿 v-if와 마찬가지로 , <template>태그를 사용해 여러 엘리먼트의 블럭을 
렌더링 할 수 있습니다.

<ul>
    <template v-for="item in items">
        <li>{{item.msg}}</li>
        <li class="divider"></li>
    </template>
</ul>


v-for와 v-if
동일한 노드에 두가지 모두 있다면, v-for가 v-if보다 높은 우선순위를 갖습니다.
즉, v-if는 루프가 반복될 때마다 실행됩니다.
이는 _일부_항목만 렌더링 하려는 경우 유용합니다.

<li v-for="todo in todos" v-if="!todo.isComplete">
    {{todo}}
</li>
위의 경우 완료되지 않은 할일만 렌더링합니다.

위 방법 대신 실행을 조건부로 하는 것이 목적이라면 래퍼 엘리먼트(또는 <template>)을 사용하세요
<ul v-if="todos.length">
    <li v-for="todo in todos">
        {{todo}}
    </li>
</ul>
<p v-else>No todos left!</p>

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