I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example:
If area1 == 'one', then assign the td-one CSS style.
<tr v-for="version in versions" :key="version.id">
<td>{{version.name}}</td>
<td>{{version.area1}}</td>
<td>{{version.area2}}</td>
<td>{{version.area1}}</td>
<td>{{version.area4}}</td>
</tr>
Script:
<script>
export default {
name: 'versions-table',
props: {
msg: String
},
data () {
return {
versions: [
{
id: '1',
name: 'Name1',
area1: 'one',
area2: 'one',
area3: 'two',
area4: 'three'
}
]
}
}
}
CSS
<style scoped>
table {
margin-left: auto;
margin-right: auto;
padding: 10px;
}
td {
padding: 5px;
}
.td-one {
background-color: green;
}
.td-two{
background: red;
}
.td-three{
background-color: blue;
}
</style>