SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

Vue.js 리스트 렌더링 > 퍼블리셔팁

퍼블리셔팁

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

Vue.js 리스트 렌더링 정보

기타 Vue.js 리스트 렌더링

본문

리스트 렌더링


v-for로 엘리먼트에 배열 매핑하기

 

v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다.
v-for 디렉티브는 item in items형태로 특별한 문법이 필요합니다.

여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭입니다.

#기본사용방법

HTML부분

<ul id="example-1">
    <li v-for="item in items">
        {{item.message}}
    </li>
</ul>

JS부분
var example1 = new Vue({
    el: "#example-1",
    data:{
        item: [
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
})

v-for 블록안에는 부모 범위 속성에 대한 모든 권한이 있습니다.
v-for는 또한 현재 항목의 인덱스에 대한 두번째 전달인자 옵션을 제공합니다.

<ul id="example-2">
    <li v-for="(item, index) in items">
        {{parentMessage}} - {{index}} - {{item.message}}
    </li>
</ul>

Js 부분
var example2 = new Vue({
    el: "#example-2",
    data:{
        parentMessage : 'Parent',
        items:[
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
})

in 대신에 of를 구분자로 사용할 수 있습니다. 그래서 javascript의 이터레이터에 대한
자바스크립트 구문과 유사합니다.

<div v-for="item of items"></div>

추천0

댓글 전체

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

회원로그인

진행중 포인트경매

  1. 참여3 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

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

© SIRSOFT