본문 바로가기

Framework/Vue2

[ Vue2 ] 09. Vue 반복문 처리

<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<div id="app">
<div v-for="(student, index) in students" :key="index">
    {{ index }}번 {{ student.name }} : {{ student.height }}
</div>
<script>
new Vue({
    el: '#app',
    data: {
        students: [
            { name: '홍길동', height: 170 },
            { name: '김철수', height: 181 },
            { name: '김영희', height: 163 },
            { name: '박진웅', height: 166 },
            { name: '홍준희', height: 171 },
        ]
    }
})
</script>

'Framework > Vue2' 카테고리의 다른 글

[ Vue2 ] 08. Vue 조건문 처리  (0) 2024.11.08
[ Vue2 ] 08. Vue 토글 처리  (0) 2024.11.08
[ Vue2 ] 07. Vue 클래스 & 스타일 바인딩  (0) 2024.11.08
[ Vue2 ] 06. Vue Watch 속성  (0) 2024.11.08
[ Vue2 ] 05. Vue Computed 속성  (0) 2024.11.08