值，表数据的条件样式

Question

我有一个vue函数，它目前使用嵌套的v-for循环来迭代对象，并相应地构建一个包含行和单元格的表。这是工作，但我需要弄清楚如何得到一个v-if到最嵌套的部分，现在看看discarded值，以设置条件样式。

基本上，对于每个td元素，我想要检查测试。丢弃，如果该字段中的数字大于0，则将单元格涂成红色。否则，颜色为绿色

我如何用我的代码的当前状态实现这一点?我不能在嵌套最多的v-for元素

中使用v-if

namestest: [
name: "john",
date: "08/12/21",
discarded: 4,
count: 19
]
<tr v-for="(tests, name) in namestest" :key="name">
<td>@{{ name }}</td>
//each time i iterate through it, it should check the discarded field and see if greather than 0. If so, then we color the cell red
<td v-for="date in dates" :key="date">@{{ tests[date] && tests[date].count }}</td>
</tr>

Answer 1

不需要使用v-if来有条件地应用样式:

<td :style="'background: ' + (tests.discarded > 0 ? 'red' : 'green')">@{{ name }}</td>

Answer 2

显然可以使用@slauth解决方案与内联表达式在style属性中，或者你可以创建一个方法/函数

无论你是使用选项API还是组合API，只要定义你的函数，它将接受一个参数(丢弃)。您甚至可以定义多个方法，一个用于样式化颜色，另一个用于有条件地呈现文本。

最后，对于内联条件，您可以始终使用<template v-if="something">模板标签之间的任何内容都将呈现，模板标签将消失。

Answer 3

你可以这样做:

<td>@{{ name }}</td>
<td v-for="date in dates" :style="'background: ' + (tests[date].discarded > 0 ? 'red' : 'blue')" :key="date">@{{ tests[date] && tests[date].count }}</td>

并使用条件行内样式。或者，可以将条件放在class的绑定中，而不是放在style属性中。像

<td v-for="date in dates" :class="{ badcell: (tests[date].discarded > 0) }">@{{ tests[date] && tests[date].count }}</td>

这样，只有当discarded大于0时，才会应用badcell类。然后在你的CSS或SCSS中有一个新的'badcell'类的样式。

td.badcell {
background-color:red;
font-weight:bold;
}