更改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>