[英]Vuejs add conditional style formatting
我有一个简单的表格呈现,我想根据该单元格中的值向单元格添加一些条件 css 样式格式。 例如
如果area1 == 'one'
分配td-one
css 样式
<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>
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.