반응형
<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>
</head>
<style>
table, th, td{
border : 1px solid black;
font-size: 20px;
text-align: center;
border-collapse: collapse;
padding: 10px;
margin-bottom: 30px;
}
</style>
<body>
<!-- id 가 app 태그 안에서 작업이 이뤄짐 -->
<div id="app">
<!-- 표1 -->
<table>
<tr>
<th>이름</th>
<th>가격</th>
<th>크기</th>
</tr>
<tr v-for="item in list">
<td>{{item.pName}}</td>
<td>{{item.price}}</td>
<td>{{item.size}}</td>
</tr>
</table>
<!-- 표2 -->
<table>
<tr>
<th>No.</th>
<th>이름</th>
<th>가격</th>
<th>크기</th>
</tr>
<tr v-for="(item,index) in list">
<th>{{index + 1}}</th>
<td>{{item.pName}}</td>
<td>
<!-- 과자 가격이 2000원 이상이면 글자색 파란색, 그 외는 빨강색 -->
<span v-if="item.price >= 2000" style="color: blue">{{item.price}}</span>
<span v-else style="color: red">{{item.price}}</span>
</td>
<td>{{item.size}}</td>
</tr>
</table>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
map : {pName : "pepero", price : 1500, size : "15cm"},
list : [{pName : "pepero", price : 1500, size : "15cm"},
{pName : "pokachip", price : 1800, size : "30cm"},
{pName : "homerunball", price : 3000, size : "15cm"},
{pName : "oreo", price : 2500, size : "18cm"},
{pName : "candy", price : 500, size : "3cm"}
]
}
, methods: {
fnAge : function() {
}
}
// 화면이 시작될 때 실행
, created: function () {
// this.fnAge();
}
});
</script>
<!-- 표3 -->
<table>
<tr>
<th>No.</th>
<th>이름</th>
<th>가격</th>
<th>크기</th>
</tr>
<!-- 2000원 이상만 화면에 출력하기 -->
<tr v-for="(item,index) in list">
<!-- template 조건, 반복의 용도로 쓰이는 태그 * internet explorer에서 작동안함-->
<template v-if="item.price >= 2000">
<th>{{index + 1}}</th>
<td>{{item.pName}}</td>
<!-- 과자 가격이 2000원 이상이면 글자색 파란색, 그 외는 빨강색 -->
<td v-if="item.price >= 2000" style="color: blue">{{item.price}}</td>
<td>{{item.size}}</td>
</template>
</tr>
</table>반응형
'Java Script > Vue.js' 카테고리의 다른 글
| [Vue] Vue 복습문제 - 검색, 체크박스, 삭제 #0417수업 #2교시 (0) | 2023.04.17 |
|---|---|
| [Vue] Vue 복습문제 #0417수업 #1교시 (0) | 2023.04.17 |
| [Vue] #0414수업 #8교시 (0) | 2023.04.14 |
| [Vue] #list #map #0414수업 #6교시 (0) | 2023.04.14 |
| [Vue] v-if 기본문법 #0414수업 #5교시 (0) | 2023.04.14 |