如何使用 CSS 和 VueJS 控制父元素的样式?
Posted
技术标签:
【中文标题】如何使用 CSS 和 VueJS 控制父元素的样式?【英文标题】:How to control the style of a parent element with CSS and VueJS? 【发布时间】:2018-11-15 22:33:35 【问题描述】:我遍历一组用户以使用 VueJS 'for' 语句构建一个表。
有一个名为“已批准”的列。如果是真的,那么我希望整个表格行都是绿色的。如何实现?
<tbody>
<tr v-for="user in users" >
<td v-for="key in columns">
<!-- At This point I can tell if the user is approved but how to change the style of the parent tr element?? -->
<span v-if='key == "approved" && user[key] == 0'>
Not Approved
</span>
<span v-else-if='key == "approved" && user[key] == 1'>
Approved!
</span>
<span v-else>
user[key]
</span>
</td>
</tr>
</tbody>
【问题讨论】:
【参考方案1】:如果您总是有“已批准”列,您可以通过这种方式简单地实现它:
<tr v-for="user in users"
v-bind:style="backgroundColor: user['approved'] == 1 ? 'green' : '' ">
或
<tr v-for="user in users"
v-bind:class="green: user['approved'] == 1">
.green
background-color: green:
【讨论】:
【参考方案2】:您可以使用方法将类动态分配给tr
<tbody>
<tr v-for="user in users" :class="'green': isApprove(user, columns)">
<td v-for="key in columns">
<!-- At This point I can tell if the user is approved but how to change the style of the parent tr element?? -->
<span v-if='key == "approved" && user[key] == 0'>
Not Approved
</span>
<span v-else-if='key == "approved" && user[key] == 1'>
Approved!
</span>
<span v-else>
user[key]
</span>
</td>
</tr>
</tbody>
<script>
...
methods:
isApprove(user, columns)
for (let idx in columns)
const key = columns[idx]
if (key === 'approved' && user[key] == 1)
return true
return false
</script>
<style>
.green
background-color: green;
</style>
【讨论】:
您可以使用arrow functions 和some 方法缩短语法。以上是关于如何使用 CSS 和 VueJS 控制父元素的样式?的主要内容,如果未能解决你的问题,请参考以下文章