Vue

v-for 리스트렌더딩

땀모 2020. 2. 15. 23:42


위와같이하면 추가작업이나 수량관리가 힘들다. 리스트가 거대해지면...

그래서 v-for을 사용한다.




v-for 사용예제(어느것을 사용하겠는가?)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
    <div id="app">
        <div v-for="person in people">
            {{ person.name }} {{ person.age}}
        </div>
    </div>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                people: [
                    { name: 'a', age: 20 },
                    { name: 'b', age: 21 },
                    { name: 'c', age: 22 },
                    { name: 'd', age: 23 },
 
                ]
            },
            methods: {
 
            }
 
        });
    </script>
</body>
cs


배열의 index를 보여줄 수 도 있음


key값 넣기(유니크한 값) id값을 넣는게 제일 일반적이라고 함.


저작자표시