반응형
[ 결과 화면 ]
- hrm_list.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
<h2 class="text-center">사원목록</h2>
<div v-if="emps.length">
<table class="table table-bordered table-condensed">
<colgroup>
<col width="10%" />
<col width="50%" />
<col width="15%" />
<col width="25%" />
</colgroup>
<tr>
<th>사원 아이디</th>
<th>사원명</th>
<th>부서</th>
<th>직책</th>
<th>연봉</th>
</tr>
<tr v-for="(emp, index) in emps" :key="index + '_items'">
<td><a :href="'hrm_detail.html?id=' + emp.id">{{emp.id}}</a></td>
<td>{{emp.name}}</td>
<td>{{emp.deptName}}</td>
<td>{{emp.title}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</div>
<div v-else>
게시글이 없습니다.
</div>
</div>
<script>
const emps = [{
id: "1",
name: "박구곤",
deptName: "인사부",
title: "사장",
salary: "60000"
},
{
id: "18",
name: "서정주",
deptName: "기획부",
title: "사원",
salary: "13000"
},
{
id: "19",
name: "안창환",
deptName: "기획부",
title: "사원",
salary: "678"
},
{
id: "20",
name: "윤정숙",
deptName: "기획부",
title: "사원",
salary: "750"
},
{
id: "21",
name: "장현철",
deptName: "기획부",
title: "사원",
salary: "8500"
},
{
id: "23",
name: "강연범",
deptName: "영업부",
title: "사원",
salary: "795"
},
{
id: "24",
name: "오은경",
deptName: "기획부",
title: "사원",
salary: "860"
},
{
id: "27",
name: "장길산",
deptName: "영업부",
title: "과장",
salary: "12345"
},
{
id: "28",
name: "장취산",
deptName: "영업부",
title: "사원",
salary: "23244"
},
{
id: "29",
name: "김상순",
deptName: "기획부",
title: "사원",
salary: "20000"
},
{
id: "30",
name: "장삼봉",
deptName: "인사부",
title: "사원",
salary: "10000"
},
{
id: "31",
name: "백소정",
deptName: "인사부",
title: "사원",
salary: "20000"
},
{
id: "33",
name: "조현욱",
deptName: "회계부",
title: "사원",
salary: "1500"
}
];
new Vue({
el: '#app',
data: {
emps : emps
}
})
</script>
</body>
</html>
- hrm_detail.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" class="container">
<h2 class="text-center">사원정보</h2>
<div class="text-align">
<template v-for="emp in emps" v-if="emp.id == id">
<table class="table table-condensed w-25">
<tr>
<th>사원 아이디</th>
<th>사원명</th>
<th>부서</th>
<th>직책</th>
<th>연봉</th>
</tr>
<tr>
<td>{{emp.id}}</td>
<td>{{emp.name}}</td>
<td>{{emp.deptName}}</td>
<td>{{emp.title}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
<br />
<div class="text-right">
<a href="./hrm_list.html" class="btn btn-primary text-right">사원목록</a>
</div>
</template>
</div>
</div>
<script>
const params = (new URL(document.location)).searchParams;
const id = params.get('id');
console.dir(new URL(document.location));
console.dir(params.get('id'));
const emps = [{
id: "1",
name: "박구곤",
deptName: "인사부",
title: "사장",
salary: "60000"
},
{
id: "18",
name: "서정주",
deptName: "기획부",
title: "사원",
salary: "13000"
},
{
id: "19",
name: "안창환",
deptName: "기획부",
title: "사원",
salary: "678"
},
{
id: "20",
name: "윤정숙",
deptName: "기획부",
title: "사원",
salary: "750"
},
{
id: "21",
name: "장현철",
deptName: "기획부",
title: "사원",
salary: "8500"
},
{
id: "23",
name: "강연범",
deptName: "영업부",
title: "사원",
salary: "795"
},
{
id: "24",
name: "오은경",
deptName: "기획부",
title: "사원",
salary: "860"
},
{
id: "27",
name: "장길산",
deptName: "영업부",
title: "과장",
salary: "12345"
},
{
id: "28",
name: "장취산",
deptName: "영업부",
title: "사원",
salary: "23244"
},
{
id: "29",
name: "김상순",
deptName: "기획부",
title: "사원",
salary: "20000"
},
{
id: "30",
name: "장삼봉",
deptName: "인사부",
title: "사원",
salary: "10000"
},
{
id: "31",
name: "백소정",
deptName: "인사부",
title: "사원",
salary: "20000"
},
{
id: "33",
name: "조현욱",
deptName: "회계부",
title: "사원",
salary: "1500"
}
];
new Vue({
el: '#app',
data: {
id: id,
emps: emps
}
});
</script>
</body>
</html>반응형
'웹 프로그래밍 > Front-End' 카테고리의 다른 글
| Vue + Spring Pagination(Paging) 구현 (0) | 2020.08.09 |
|---|---|
| Vue 에서 javascript 를 이용하여 kakao login 구현 (1) | 2020.07.26 |
| 메모장 만들기 (1) | 2020.03.25 |
| "오늘의 메뉴" JS -> JQuery 로 바꿔보기 (0) | 2020.03.25 |
| Javascript 생성자, 프로토타입 (0) | 2020.03.21 |
