-
글쓴이글
-
2022년 5월 8일 21:25 #33481
전태정참가자thead 와 tbody를 for문을 활용해 표현하는 방법은 실패하고, 아래 방법으로 표를 구성하는데 성공했습니다.
if문을 활용해서 몸무게 (weight)가 70이상일 경우 해당 라인을 노란색으로
그렇지 않은 라인 (70미만)은 회색으로 표현하고 싶습니다.
if문을 tbody에 넣으면 오류가 나는데 어느 부분에 넣어야 할까요?<template>
<div>
<h3>Board</h3>
<table class="boardData">
<thead>
<tr>
<th>성</th>
<th>나이</th>
<th>키</th>
<th>몸무게</th>
</tr>
</thead>
<tbody class="yellow">
<tr v-for = "boardData in boardDatas" :key="boardData.id">
<td>{{boardData.name}}</td>
<td>{{boardData.age}}</td>
<td>{{boardData.height}}</td>
<td>{{boardData.weight}}</td>
</tr>
</tbody>
</table>
</div>
</template><script>
export default{
name: 'App',
data(){
return{
boardDatas: [
{
name: 'Kim',
age: 18,
height: 180,
weight: 70,
},
{
name: 'Lee',
age: 19,
height: 177,
weight: 72,
},
{
name: 'Choi',
age: 22,
height: 170,
weight: 68,
},
{
name: 'Ahn',
age: 25,
height: 165,
weight: 60,
},
{
name: 'Park',
age: 19,
height: 176,
weight: 72,
},
]
}
}
}
</script><style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 60px;
}
h3{
color: green;
}
table {
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
}
.yellow
{
background-color: yellow;
}
.gray
{
background-color: gray;
}</style>
2022년 5월 9일 09:43 #33514
codingapple키 마스터<tr :class="[조건식 ? yellow : gray ]">
삼항연산자 같은거 써서 조건에 따라 class명 부여가능합니다
2022년 5월 9일 23:43 #33580
전태정참가자조언해 주신 부분을 아래와 같이 작성하였는데 아무 반응이 없습니다.
어떤 부분이 잘못된 걸까요?<template>
<div>
<h3>Board</h3>
<table class="boardData">
<thead>
<tr>
<th>성</th>
<th>나이</th>
<th>키</th>
<th>몸무게</th>
</tr>
</thead>
<tbody>
<strong> <tr v-for = "boardData in boardDatas" :key="boardData" :class="[ boardData.weight >= 70 ? yellow : gray ]"></strong>
<td>{{boardData.name}}</td>
<td>{{boardData.age}}</td>
<td>{{boardData.height}}</td>
<td>{{boardData.weight}}</td>
</tr>
</tbody>
</table>
</div>
</template><script>
export default{
name: 'App',
data(){
return{
boardDatas: [
{
name: 'Kim',
age: 18,
height: 180,
weight: 70,
},
{
name: 'Lee',
age: 19,
height: 177,
weight: 72,
},
{
name: 'Choi',
age: 22,
height: 170,
weight: 68,
},
{
name: 'Ahn',
age: 25,
height: 165,
weight: 60,
},
{
name: 'Park',
age: 19,
height: 176,
weight: 72,
},
]
}
}
}
</script><style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 60px;
}
h3{
color: green;
}
table {
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
}
.yellow
{
background-color: yellow;
}
.gray
{
background-color: gray;
}</style>
------------------------------------------------------------------------------
v- for문을 통해 표를 작성했을 때, 조건부 작성을 어떻게 하는지도 궁금합니다.
<template>
<div>
<h3>Board</h3>
<table class="boardData">
<thead>
<tr>
<th v-for = "item in header" :key ="item">{{item}}</th>
</tr>
</thead>
<tbody>
<strong><tr v-for = "line in boardDatas" :key="line" :class="[boardDatas >=70 ? yellow:gray]"></strong>
<td v-for = "item in line" :key="item">{{item}}</td>
</tr>
</tbody>
</table>
</div>
</template><script>
export default{
name: 'App',
data(){
return{
header:["성","나이","키","몸무게"],
boardDatas: [
['Kim',18,180,70],
['Lee',19,177,72],
['Choi',22,170,68],
['Ahn',25,165,60],
['Park',19,176,72],
]
}
}
}
</script><style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 60px;
}
h3{
color: green;
}
table {
margin-left: auto;
margin-right: auto;
width: 50%;
border: 1px solid #444444;
border-collapse: collapse;
}
th, td {
border: 1px solid #444444;
}
.yellow
{
background-color: yellow;
}
.gray
{
background-color: gray;
}</style>
2022년 5월 10일 09:36 #33600
codingapple키 마스터yellow 랑 gray에 따옴표가 빠진듯요
v-for쓴곳에서 v-if는 못씁니다 안쪽에 td같은곳엔 쓸 수 있습니다
-
글쓴이글
- 답변은 로그인 후 가능합니다.