javascript - 更改 v-for 生成表的文本颜色

Question

我正在使用 vue.js 来显示一堆 json。它是显示在表格中的一堆数字。这很好用，但如果数字为负数，则应读取其单元格的文本颜色。

<table>
    // ...
    <tbody>
        <tr>
            <td v-for="i in numbers" class="text-danger"> {{ i }} </td>
        </tr>
    </tbody>
</table>

如您所见，“class="text-danger"在所有情况下都将文本颜色设置为红色。我希望它仅在数字 (i) 为负数时应用，因此附加一个条件。

我完全不知道如何用 vue 做到这一点。

Answer 1

动态应用类:

<td v-for="i in items" :class="{ 'text-danger': i < 0 }">{{ i }}</td>