[VUE.JS] 뷰 디렉티브 v-for [반복] 사용하기
이번 포스팅은 뷰 디렉티브중 하나인 v-for 에 대한 포스팅입니다.
제이쿼리와 비교하면 스크립트에서 for문 안에 append 기능을 합친것과 비슷하다고 보시면 되겠습니다.
제이쿼리로 동적으로 엘리먼트 추가할때마다 귀찮았는데
vue.js의 v-for을 이용하면 손쉽게 기능 추가가 가능해 집니다.
1. v-for 사용하기
우선 이전 포스팅과 마찬가지로 jsbin을 이용해
실습해 보도록 하겠습니다.
https://jsbin.com/qowolakowi/edit?html,js,output
해당 링크로 들어가면 이미 만들어진 실습코드에서 조금만 변경 하면 됩니다.
이전 포스팅을 참고하시면 더 좋습니다.
2018/02/19 - [Yame Programmer/VUE.JS] - [VUE.JS] VUE[뷰] 시작해보기
2018/02/22 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 사용해보기
2018/02/26 - [Yame Programmer/VUE.JS] - [VUE.JS] 뷰 디렉티브 v-bind 사용하기
1) 기본 사용법
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>야매 가이드</title> </head> <body> <div id="app"> <ul> <li v-for="dataList in list"> {{ dataList.text }} </li> </ul> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> </body> </html> | cs |
js
| // 새로운 뷰를 정의합니다 var app = new Vue({ el: '#app', // 어떤 엘리먼트에 적용을 할 지 정합니다 // data 는 해당 뷰에서 사용할 정보를 가지고 있습니다. data: { list:[ {text:"react 배워보기"}, {text:"pyhton 배워보기"}, {text:"vue 배워보기"}, {text:"연봉을 올려보기"} ] } }); | cs |
결과
html 코드를 보시면
v-for="dataList in list"
라고 되어 있고
js쪽 코드를 보시면 list안에 오브젝트 배열로 데이터가 들어있습니다.
dataList in list 에서 dataList 는 가져온 데이터를 사용할 변수명 같은거고
list는 js에서 선언한 list 데이터 입니다.
jstl에서 for돌리는것과 비슷한 방법이라고 생각하시면 이해하기 쉽습니다.
★
2) index 사용하기
jstl의 for기능중에서 index 번호를 불러오는게 있는데
vue.js의 v-for에도 같은 기능이 있습니다.
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>야매 가이드</title> </head> <body> <div id="app"> <ul> <li v-for="(dataList, index) in list"> {{index}} {{ dataList.text }} </li> </ul> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> </body> </html> | cs |
1) 에서 작성한 코드중 data in list -> (dataList, index) in list 로 변경해주시고
{{}}로 index를 추가해 주시면
결과
이렇게 순서 번호가 나타나게 됩니다.
물론
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>야매 가이드</title> </head> <body> <div id="app"> <ul> <li v-for="(dataList, index) in list"> {{index+1}} {{ dataList.text }} </li> </ul> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> </body> </html> | cs |
이렇게 index에 바로 연산식을 사용해
이렇게 뽑아내는 것도 가능 합니다.
v-for 디렉티브를 사용해 배열 데이터를 동적으로 렌더링 하는 방법에 대해서 알아보았습니다.
이제 디렉티브는 데이터를 양방향으로 바인딩해주는 v-model과 이벤트 핸들링을 하는 v-on
이렇게 두가지가 남았네요
다들 재밌게 개발 하시고
연봉들 많이 올라갔으면 좋겠습니다!
