위와같이하면 추가작업이나 수량관리가 힘들다. 리스트가 거대해지면...
그래서 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값을 넣는게 제일 일반적이라고 함.
'Vue' 카테고리의 다른 글
| 전역 component 예제, 지역 component 예제 (0) | 2020.02.16 |
|---|---|
| 여러개의 Vue인스턴스 사용하기 (0) | 2020.02.16 |
| v-if, v-show 버튼클릭시 보이게 안보이게 (0) | 2020.02.15 |
| 스타일 바인딩 (0) | 2020.02.15 |
| 클래스 스타일 변경하기 (0) | 2020.02.15 |