I have a Vue.js setup to exhibit a collection of JSON data which consists mainly of numbers. These numbers are displayed in a table format, with one minor issue - if the number happens to be negative, the text color of its cell needs to be red.
<table>
// ...
<tbody>
<tr>
<td v-for="i in numbers" :class="{ 'text-danger': i < 0 }"> {{ i }} </td>
</tr>
</tbody>
</table>
Currently, regardless of whether the number is positive or negative, "class="text-danger" sets the text color to red. I want this styling to only apply to negative numbers, so there should be a condition attached to that logic.
Despite my efforts, I am unable to figure out how to achieve this specific functionality with Vue.js.