●반복문(v-for)
- 자바스크립트에서의 for문 역할을 한다.
- 반복해야하는 html요소안에 넣어서 사용한다.
ex)배열 반복문 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="simpleDiv">
<h3>{{text}}</h3>
<hr>
<p v-for="man in list">
num : {{man.num}} ,
name : {{man.name}} ,
job : {{man.job}}
</p>
<hr>
<table border="1">
<tr v-for="man in list">
<td> num : {{man.num}}</td>
<td> name : {{man.name}}</td>
<td> job : {{man.job}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var model01 = {
text : '7번째 예제입니다!!!',
list : [
{"num":1,"name":"A","job":"aaa"},
{"num":2,"name":"B","job":"bbb"},
{"num":3,"name":"C","job":"ccc"},
{"num":4,"name":"D","job":"ddd"},
{"num":5,"name":"E","job":"eee"},
]
};
var test = new Vue({
el : '#simpleDiv',
data : model01
})
</script>
</body>
</html>
ex)객체 반복문 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="simpleDiv">
<h3>{{text}}</h3>
<hr>
<p v-for="(value,key) in arr">{{key}}, {{value}}</p>
<hr>
<p v-for="(value,key, index) in arr">{{index}} : {{key}}, {{value}}</p>
</div>
<script type="text/javascript">
var model01 = {
text : '8번째 예제입니다!!!',
arr : {
"A":"aa",
"B":"bb",
"C":"cc",
"D":"dd"
}
};
var test = new Vue({
el : '#simpleDiv',
data : model01
})
</script>
</body>
</html>
'프로그래밍 > vue.js' 카테고리의 다른 글
| vue.js - 6.조건문(v-if, v-else, v-else-if, v-show) 디렉티브 (0) | 2021.08.01 |
|---|---|
| vue.js - 5. v-bind, v-model 디렉티브 (0) | 2021.08.01 |
| vue.js - 4. v-text, v-html 디렉티브 (0) | 2021.08.01 |
| vue.js - 3.vue기본구조(MVVM) (0) | 2021.08.01 |
| vue.js - 2.Visual Studio Code(VSCode) 한글 언어설정하기 (0) | 2021.08.01 |
댓글