JavaScript와 HTML, CSS등에 대해서는 일체 다루지 않는다.
기초지식은 다른 강의를 참조하도록 하라.
참고:
vue에서의 for문은 정말 간결하기 그지 없지만 사실 마냥 좋지는 않다.
프로그래밍적으로 많은 기능을 제공하는 for문(while혹은 repeat혹은 do-while)등과는 달리 심플한 기능만 있다.
이해가 안가는건 아니지만 어쨋던 한번 보도록하자.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" style="border-collapse:collapse;">
<tr v-for="index in age">
<td>{{name}}</td>
<td>{{index}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
},
});
</script>
</html>
<[element 이름] v-for="(value, key) in [반복가능한 변수 이름]">
보통 반복할 부분을 v-for로 감싼다. 그 다음 v-for은 기존 다른 언어들에서 사용했던 방식으로 a in b방식으로 쓴다.
여기서 변수를 하나만 적으면 앞의 value만 사용하지만 ()로 감싸고 뒤에 변수마저 적으면 이는 key로서 출력된다.
여기서 a는 낱개, b는 반복되는 개체이다.
단 반복되는것을 개체가 아닌 숫자로 하면 1씩증가되는 반복문이 된다.
위의 예로 들면 age는 26이므로 1부터 26까지 1씩 증가되므로 총 26번이 반복된다.
만약 1부터가 아니라 다른 숫자부터 시작하고 싶다면, 혹은 step을 1이아니라 2로 하고 싶다면?
놀랍게도 시작 숫자나 증가분을 정할 수가 없다! 이게 뭔 소리냐 싶지만 조정할 수 없다.
만약 조정하고 싶다면 숫자가아니라 직접 list를 사용하는 방식으로 써야한다.예를 들면 아래와 같이 말이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" style="border-collapse:collapse;">
<tr v-for="index in list()">
<td>{{name}}</td>
<td>{{index}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
list: function () {
var list = [];
for (var i = 1; i < this.age; i += 2) list.push(i);
return list
},
},
});
</script>
</html>
정말 이렇게 써야한다고?? 놀랄수도 있다.
이게... 필자도 당황스러웠다.아마 나중에 추가될진모르겠지만 지금 당장의 방법은 이것밖에 없다.
그러나 사실 이 문제가 크게 와닿을리는 없다. 왜냐하면 숫자로 사용하는 일 자체가 크게 없기 때문이다.
보통은 객체로 사용해서 객체를 순환하게 하는 경우가 많기 때문이다.
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" style="border-collapse:collapse;">
<tr v-for="(value, key) in data">
<td>{{value}}</td>
<td>{{key}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'kukaro',
age: 26,
data:{'bird':'raven','animal':'tiger','fish':'tuna'}
},
});
</script>
</html>
여기서 여러분들이 중요한건 key, value순서가 아니라 value, key순서라는 것이다.
사실 js를 썼던 사람들이라면 익숙하겠지만 다른 언어에서는 key, value순서로 접근하지만 js는 반대이다.
모든 값을 object(연관배열)로 하는건 아니지만 연관배열로 하는 테스트를 해보도록하자.
object를 사용한 예시인데 제대로 적용이됬다.
실제로는 숫자로 순환하는 사례보단 json(java script object notation)으로 순환하는 경우가 많다.
'Programming > JavaScript-Vue' 카테고리의 다른 글
| [Vue-08]이벤트 (0) | 2018.02.20 |
|---|---|
| [Vue-07]배열(Array) 및 연관배열(Object) 사용시 주의 사항 (2) | 2018.02.20 |
| [Vue-05]조건문 (0) | 2018.02.20 |
| [Vue-04]데이터 바인딩 (0) | 2018.02.20 |
| [Vue-03]라이프 사이클-기본 (0) | 2018.02.20 |