Ändern Sie Textfarbe von v-für generierte Tabelle

Question

Ich benutze vue.js, um eine Reihe von Json anzuzeigen. Es ist ein Stapel von Zahlen, der in einer Tabelle angezeigt wird. Das funktioniert gut, aber wenn die Zahl negativ ist, sollte die Textfarbe seiner Zelle gelesen werden.

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

Wie Sie sehen können, „class =“ text-Gefahr“zu rot die Textfarbe setzt in allen Fällen. Ich will es nur dann, wenn die Zahl (i) negativ ist, so eine Bedingung, dass anhängen .

ich bin völlig ratlos, wie das mit vue zu tun

Answer 1

dynamisch die Klasse bewerben.

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