목록v-for (1)

SeouliteLab

Vue.js 반복문 활용하기: 반응형 데이터로 동적인 리스트 만들기

Vue.js에서 반복문을 사용하여 동적인 리스트를 만드는 방법에 대해 알아보겠습니다. Vue의 Single File Component(SFC) 형식을 사용하여 다양한 예제를 제시하겠습니다. 예제 1: 배열 요소 반복하기 파일명: ArrayExample.vue {{ item.name }} 출력 결과: Apple Banana Cherry 설명: 이 예제에서는 Vue의 반복문 디렉티브인 v-for를 사용하여 배열의 각 요소를 반복하여 출력합니다. items 배열의 각 객체는 고유한 id와 name 속성을 가지고 있으며, v-for 디렉티브를 통해 각 객체의 name 속성을 출력합니다. 예제 2: 객체 반복하기 파일명: ObjectExample.vue {{ key }}: {{ value }} 출력 결과: nam..
프로그래밍 2024. 3. 22. 16:47
이전 Prev 1 Next 다음