[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

select 와 option은 웹사이트를 구현할때 아주 많이 사용되며 유용한 태그 이다.


append 함수와 empty함수를 사용해 셀렉트박스 안에 있는 선택 옵션들을 HTML에 고정으로 만들어 두는 것이 아닌


특정 이벤트가 앞에 있는 셀렉트박스의 다른 값을 선택할때마다 동적으로 내용이 바뀌게 하는 방법을


알아 보도록 하자.



예를들어 1번 셀렉트 박스와 2번 셀렉트 박스가 있을떄


사용자가 1번 셀렉트 박스의 값을 선택할때마다 2번 셀렉트 박스의 선택 옵션의 내용이 바뀌도록 말이다.


혹은 1번 셀렉트 박스의 값이 바뀔때마다가 아닌 그 어떠한 이벤트라도 가능 하다.



1
2
3
4
5
6
7
8
<select id="select1" onchange="itemChange()">
<option>키보드</option>
<option>마우스</option>
<option></option>
</select>
 
<select id="select2">
</select>
cs


먼저 위와 같은 코드로 셀렉트 박스가 2개 있을때


1번 셀렉트 박스의 값이 바뀔때마다 2번 셀렉트 박스의 옵션들이 바뀌도록 만들어 보자




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
27
28
function itemChange(){
 
var keyboard = ["갈축","청축","적축"];
var mouse = ["광마우스","유선마우스","비싼마우스","미키마우스"];
var monitor = ["17인치","22인치","24인치","26인치"];
 
var selectItem = $("#select1").val();
 
var changeItem;
 
if(selectItem == "키보드"){
changeItem = keyboard;
}
else if(selectItem == "마우스"){
changeItem = mouse;
}
else if(selectItem == "모니터"){
changeItem =  monitor;
}
 
$('#select2').empty();
 
for(var count = 0; count < changeItem.size(); count++){                
                var option = $("<option>"+changeItem[count]+"</option>");
                $('#select2').append(option);
            }
 
}

cs

   


여기서 주목할 것은


empty()와 append 이다



기존에 들어가 있는 2번 셀렉트 박스 안의 옵션들을 깨끗하게 지우기 위해서 empty함수를 사용 하였고


append 함수를 이용해 셀렉트 박스 안에 만들어진 option을 삽입한 것이다.


이를 응용하면 Ajax를 이용해 위의 스크립트와 같은 하드코딩이 아닌 좀더 다이나믹한 웹서비스를 제공해 줄수도 있다.







저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

YYYYMMDD 형식 날짜 구하기  (0) 2016.12.28
[자바스크립트] 정규식을 이용한 초간단 천단위콤마  (0) 2016.07.26
제이쿼리 foreach 사용하기  (1) 2016.06.15
[JavaScript] object 객체의 속성 동적 추가  (0) 2016.03.07
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01

오브젝트를 생성하고 특정 데이터의 개수에 따라


속성을 추가적으로 생성해야 하는 경우가 있으나 


속성의 이름을 지정하지 못해 곤란해 했던 경우가 있다.


일반적인 오브젝트의 속성 추가는

1
2
3
4
5
6
7
8
var _gridObj = {};
 
 
_gridObj.time1 = 1;
_gridObj.time2 = 2;
_gridObj.time3 = 3;
_gridObj.time4 = 4;
 
cs


위와 같이 이루어 지지지만 데이터의 개수만큼 time뒤에 들어가는 숫자가 바뀌어야 한다면


아래와 같이 작성을 해주면 된다.


1
2
3
4
5
var _gridObj = {};
for(var dataCount = 0; dataCount < dataSize; dataCount++){
    _gridObj[ 'time'+dataCount] = result;
}
 
cs




저작자표시 비영리

'Yame Programmer > Java Script[JQuery]' 카테고리의 다른 글

[제이쿼리] 동적으로 select option 추가 하기(empty와 append)  (4) 2016.07.13
제이쿼리 foreach 사용하기  (1) 2016.06.15
[javaScript] setInterval / 시간단위 반복  (0) 2015.07.01
[JavaScript] 제이쿼리로 레이어팝업 만들기  (0) 2015.06.23
[ajax] ajax사용시 뒤로가기 문제  (0) 2015.06.23

+ Recent posts

티스토리툴바