[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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
// 새로운 뷰를 정의합니다
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 


이렇게 두가지가 남았네요



다들 재밌게 개발 하시고


연봉들 많이 올라갔으면 좋겠습니다!

저작자표시 비영리

'Yame Programmer > VUE.JS' 카테고리의 다른 글

[VUE.JS] 뷰 디렉티브 v-bind 사용하기  (2) 2018.02.26
[VUE.JS] 뷰 디렉티브 사용해보기  (0) 2018.02.22
[VUE.JS] VUE[뷰] 시작해보기  (0) 2018.02.19

+ Recent posts

티스토리툴바