잡다한 지식의 블로그

Vue.js에서 v-for 본문

Vue.js

Vue.js에서 v-for

아이스올리 2024. 4. 17. 18:05

Vue.js에서 v-for란?

- HTML 태그 속성 부분에서 사용하는 반복문.

- v-for = "(item, index) in(of) list" :key="key"의 형식을 가진다.

- v-for문을 사용하기 위해선 key값을 지정해줘야 하며 이 값은 유니크 값으로 해주는 것이 좋다.

Vue.js에서 v-for 사용 예

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            {{ people[0].name}}  {{people[0].age}}
        </div>
        <div>
            {{ people[1].name}}  {{people[1].age}}
        </div>
        <div>
            {{ people[2].name}}  {{people[2].age}}
        </div>
        <div>
            {{ people[3].name}}  {{people[3].age}}
        </div>

        <hr>

        <div v-for="person in people" :key="person.id">
            {{ person.name}}  {{person.age}}
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                people : [
                    { id:1,name : 'a', age:20},
                    { id:2,name : 'b', age:21},
                    { id:3,name : 'c', age:22},
                    { id:4,name : 'd', age:23}
                ]
            },
            methods: {

            }
        })
    </script>
</body>
</html>

Vue.js에서 v-for 사용 예
v-for.zip
0.00MB

'Vue.js' 카테고리의 다른 글

Vue.js Component  (0) 2024.04.19
Vue.js에서 멀티 인스턴스 사용하기  (0) 2024.04.18
Vue.js에서 조건부 렌더링  (0) 2024.04.17
Vue.js에서 Class와 Style 속성 Binding  (0) 2024.04.16
Vue.js Watch 속성  (0) 2024.04.15
공유하기 링크
'Vue.js' Related Articles more
Comments