beomy

이번 포스트에서는 v-for을 사용하여 리스트 렌더링 하는 방법에 대해 이야기 할 것입니다. 1. v-for와 배열 v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 item in items 형태의 문법을 넘겨줘야 합니다. items는 원본 데이터 배열이고 item은 반복되는 배열의 요소입니다. 기본 사용방법 {{ item.message }} new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } });위의 예제는 배열을 사용한 기본적인 리스트 렌더링 예제입니다. 또한 배열의 몇번째 인덱스인지 알 수 있는 인덱스 정보도 제공합니다...

이번 포스트는 v-if와 v-show를 이용하여 조건부 렌더링을 이야기 합니다. 1. v-if v-if 디렉티브를 사용하여 조건부 렌더링을 사용할 수 있습니다. Yes new Vue({ el: '#app', data: { ok: true, }, });v-else v-if 디렉티브는 v-else 디렉티브와 함께 사용 할 수 있습니다. Yes No new Vue({ el: '#app', data: { ok: true, }, });위의 예제는 CodePen에서 결과를 확인 할 수 있습니다. v-else-if v-else-if 디렉티브는 2.1.0에 추가되었습니다. 이름에서 알 수 있듯이 else if 블록 역할을 합니다. A B C Not A/B/C new Vue({ el: &#3..