반응형
<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;
}
.color_red {
color:red;
}
.color_blue {
color:blue;
}
</style>
</head>
<body>
<div id="app">
<div class="table-list">
<table>
<thead>
<tr>
<th scope="col"></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>
<!-- 학년이 1학년이면 빨간색, 학년이 1학년이 아니면 파란색으로 변경하기 -->
<!-- ★ v-bind-class -->
<!-- 조건을 줘서 css 에 바로 적용시킬 수 있음 -->
<tr v-for="(item, index) in list" v-bind:class="[item.stu_grade == 1 ? 'color_red' : 'color_blue']">
<td><input type="checkbox" v-bind:value = "item.stu_no" v-model="checkList"></td>
<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.stu_height}}</td>
<td>{{item.stu_weight}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true,
list : [],
checkList : [],
addFlg : false
}, methods: {
fnTest : function(){
var self = this;
$.ajax({
url:"js/MOCK_DATA2.json",
dataType:"json",
success:function(data) {
self.list = data;
}
});
}
}
, created: function () {
this.fnTest()
}
});
</script><!-- 학년이 1학년이면 빨간색, 학년이 1학년이 아니면 파란색으로 변경하기 -->
<!-- ★ v-bind-class -->
<!-- 조건을 줘서 css 에 바로 적용시킬 수 있음 -->
<tr v-for="(item, index) in list" v-bind:class="[item.stu_grade == 1 ? 'color_red' : 'color_blue']">
<td><input type="checkbox" v-bind:value = "item.stu_no" v-model="checkList"></td>
<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.stu_height}}</td>
<td>{{item.stu_weight}}</td>
반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] v-bind:class, 조건문 #0418수업 #3교시 (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 |