반응형
ERN.json 파일 내용
[
{"stu_no":"20153075 ","stu_name":"옥한빛","stu_dept":"기계","stu_grade":1,"avg":61}
,{"stu_no":"20153088 ","stu_name":"이태연","stu_dept":"기계","stu_grade":1,"avg":69.5}
,{"stu_no":"20143054 ","stu_name":"유가인","stu_dept":"기계","stu_grade":2,"avg":41}
,{"stu_no":"20152088 ","stu_name":"조민우","stu_dept":"전기전자","stu_grade":1,"avg":45}
,{"stu_no":"20132003 ","stu_name":"박희철","stu_dept":"전기전자","stu_grade":3,"avg":72}
,{"stu_no":"20151062 ","stu_name":"김인중","stu_dept":"컴퓨터정보","stu_grade":1,"avg":81}
,{"stu_no":"20131001 ","stu_name":"김종헌","stu_dept":"컴퓨터정보","stu_grade":3,"avg":73}
,{"stu_no":"20131025 ","stu_name":"옥성우","stu_dept":"컴퓨터정보","stu_grade":3,"avg":70}
]stu_grade (점수) 가
90점 이상이면 학점 A, 빨간색
80점 이상이면 학점 B, 파란색
70점 이상이면 학점 C, 초록색
60점 이상이면 학점 D, 보라색
그 외 학점 F
* 학점 컬럼을 만들어야 함
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
table, td, th{
border : 1px solid #ccc;
font-size: 20px;
text-align: center;
border-collapse: collapse;
padding : 5px 20px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.purple {
background-color: purple;
}
.white {
background-color: whites;
}
</style>
</head>
<body>
<div id="app">
<div class="table-list">
<table>
<thead>
<tr>
<th></th>
<th scope="col">No.</th>
<th scope="col">학번</th>
<th scope="col">이름</th>
<th scope="col">학과</th>
<th scope="col">학년</th>
<th scope="col">평균점수</th>
<th scope="col">학점</th>
</tr>
</thead>
<tbody>
<!-- v-bind:class="{'red' : item.grade == 'A', 'blue' : item.grade == 'B', 'green' : item.grade == 'C', 'purple' : item.grade == 'D'}" -->
<tr v-for="(item, index) in list" v-bind:class="[item.avg >= 90 ? 'red' : item.avg >= 80 ?
'blue' : item.avg >= 70 ?
'green' : item.avg >= 60?
'purple' : 'white']">
<th><input type="checkbox"></th>
<td>{{index + 1}}</td>
<td>{{item.stu_no}}</td>
<td>{{item.stu_name}}</td>
<td>{{item.stu_dept}}</td>
<td>{{item.stu_grade}}</td>
<td>{{item.avg}}</td>
<td >{{item.grade}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true
, list : [],
score : 0
}, methods: {
fnTest : function(){
var self = this;
// ajax : 검색결과를 데이터로 넘어옴
$.ajax({
url:"js/ENR.json",
dataType:"json",
success:function(data) {
self.list = data;
// list.grade 를 따로 선언하지 않아도
// list 에 map 형식으로 값이 저장되어 있기 때문에
// key(grade) & value('A') 로 저장된다.
for(let i=0; i<self.list.length; i++) {
if (self.list[i].avg >= 90) {
self.list[i].grade = 'A';
} else if (self.list[i].avg >= 80) {
self.list[i].grade = 'B';
} else if (self.list[i].avg >= 70) {
self.list[i].grade = 'C';
} else if (self.list[i].avg >= 60) {
self.list[i].grade = 'D';
} else {
self.list[i].grade = 'F';
}
}
}
});
},
}
, created: function () {
this.fnTest();
}
});
</script>반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] v-bind:class #0418수업 #1교시 (0) | 2023.04.18 |
|---|---|
| [Vue] Vue 복습문제 - 추가, 삭제 #0417수업 #4교시 (0) | 2023.04.17 |
| [Vue] Vue 복습문제 - 검색, 체크박스, 삭제 #0417수업 #2교시 (0) | 2023.04.17 |
| [Vue] Vue 복습문제 #0417수업 #1교시 (0) | 2023.04.17 |
| [Vue] #0414수업 #8교시 (0) | 2023.04.14 |