vue，表格数据的条件样式答案

【问题标题】：vue, condtional styling for table datavue，表格数据的条件样式
【发布时间】：2021-08-17 06:26:56
【问题描述】：

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

基本上，对于每个td 元素，我想检查tests.discarded，如果该字段中的数字大于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>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

无需使用v-if 来有条件地应用样式：

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

【讨论】：

【解决方案2】：

您显然可以在样式属性中使用带有 内联表达式 的@slauth 解决方案，或者您可以创建一个方法/函数。

无论您使用的是Option API 还是Composition API，只需定义您的函数以接受参数（丢弃）。您甚至可以定义多种方法，一种用于设置颜色样式，另一种用于条件渲染文本。

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

【讨论】：

【解决方案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>

这样，badcell 类将仅在 discarded 大于 0 时应用。然后在您的 CSS 或 SCSS 中为新的“badcell”类设置样式。

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

【讨论】：