728x90
반응형
vueex4.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220530/vueex4.html -->
<html>
<head>
<meta charset="UTF-8">
<title>v-for 예제</title>
<script type="text/javascript" src="https:unpkg.com/vue@2.5.16/dist/vue.js"></script>
<style>
#example {width:600px; border:1px solid black; border-collapse:collapse;}
#example td, #example th {border:1px solid blac; text-align:center;}
#example th {color:yellow; background-color:purple;}
.divider {height:2px; background-color:gray;}
</style>
</head>
<body>
<table id="example">
<tr>
<th>번호</th>
<th>이름</th>
<th>전화</th>
<th>주소</th>
</tr>
<!--
v-for : 배열, 데이터를 반복하기
contact : 배열의 요소 객체 {"no":100, "name":"설현", ....}
index : 배열의 인덱스 (첨자). 0부터 시작
-->
<tr v-for="(contact, index) in contacts">
<td>{{contact.no}}</td>
<td>{{contact.name}}</td>
<td>{{contact.tel}}</td>
<td>{{contact.address}}</td>
</tr>
<tr class="divider" v-if="index%5 === 4">
<td colspan="4"></td>
</table>
<script type="text/javascript">
let model = {
"contacts" : [
{"no":100, "name":"설현", "tel":"010-1234-5678", "address":"서울"},
{"no":99, "name":"초아", "tel":"010-1111-2222", "address":"인천"},
{"no":98, "name":"하니", "tel":"010-2345-6789", "address":"경기"},
{"no":97, "name":"보아", "tel":"010-2222-3333", "address":"제주"},
{"no":96, "name":"지아", "tel":"010-4444-5555", "address":"강원"},
{"no":95, "name":"정연", "tel":"010-4444-5555", "address":"충남"},
{"no":94, "name":"쯔위", "tel":"010-5555-6666", "address":"충북"},
{"no":93, "name":"사나", "tel":"010-7777-8888", "address":"경남"},
{"no":92, "name":"모모", "tel":"010-9999-0000", "address":"경북"},
{"no":91, "name":"소진", "tel":"010-0000-1111", "address":"전북"}
]
}
let com = new Vue ({ el : "#example", data:model })
</script>
</body>
</html>728x90
반응형
'study > Vue' 카테고리의 다른 글
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |
|---|---|
| [Vue] 28. v-for 예제2 (vueex5.html ) (0) | 2022.05.30 |
| [Vue] 28. v-if : 조건 디렉티브 (vueex3.html ) (0) | 2022.05.30 |
| [Vue] 28. v-model 예제 (vueex2.html ) (0) | 2022.05.30 |
| [Vue] 28. vue 예제1 (vueex1.html ) (0) | 2022.05.30 |