728x90
반응형
vueex5.html
<!DOCTYPE html>
<!-- /vue1/src/main/webapp/20220530/vueex5.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>
<script type="text/javascript">
// == : 자동형변환하여 equal이 되는 경우
// === : 형변환되지 않고 equel이 되는 경우
console.log("100" == 100) //true
console.log("100" === 100) //false
console.log("100" == "100") //true
console.log("100" === "100") //true
console.log(100 == 100) //true
console.log(100 === 100) //true
</script>
</head>
<body>
<table id="example">
<tr>
<th>번호</th>
<th>이름</th>
<th>전화</th>
<th>주소</th>
</tr>
<!--
v-for : 배열, 데이터를 반복하기
contact : 배열의 요소 객체 {"no":100, "name":"설현", ....}
index : 배열의 인덱스 (첨자). 0부터 시작
-->
<template v-for="(contact, index) in contacts">
<tr>
<td>{{contact.no}}</td>
<td>{{contact.name}}</td>
<td>{{contact.tel}}</td>
<td>{{contact.address}}</td>
</tr>
<!-- tr 태그는 index % 5 나머지 값이 4인 경우만 보여줌 -->
<tr class="divider" v-if="index % 5 === 4"> <!-- index 변수 사용 가능 -->
<td colspan="4"></td>
</tr>
</template>
</table>
<br>
<!-- v-for : 객체에 멤버 호출 -->
<select id="regions">
<option disabled="disabled" selected>지역을 선택하세요.</option>
<option v-for="(val,key) in regions" v-bind:value="key">{{val}}</option>
</select>
<script type="text/javascript">
let regions = new Vue ({
el : "#regions",
data : {regions : {
"A":"Asia", "B":"America", "C":"Europe", "D":"Africa", "E":"Oceania"
}}
})
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. 두 수의 합 구하기 (exam1.html ) (0) | 2022.05.30 |
|---|---|
| [Vue] 28.computed : 함수를 데이터로 사용 (vueex6.html ) (0) | 2022.05.30 |
| [Vue] 28. v-for 예제 (vueex4.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 |