Commandes du jour

<table id="app">
  <caption>Commandes du jour</caption>
  <thead>
    <tr><th scope="col">Numéro</th><th scope="col">Client</th><th scope="col">Montant</th><th scope="col">État</th></tr>
  </thead>
  <tbody>
    <tr v-for="c in commandes" :key="c.numero" :class="{ 'en-retard': c.etat === 'en retard' }">
      <td>{{ c.numero }}</td>
      <td>{{ c.client }}</td>
      <td>{{ euros(c.montant) }}</td>
      <td>{{ c.etat }}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><th scope="row" colspan="2">Total</th><td colspan="2">{{ euros(total()) }}</td></tr>
  </tfoot>
</table>

const { createApp } = Vue;

function euros(montant) {
  return montant.toLocaleString("fr-FR", { style: "currency", currency: "EUR" });
}

createApp({
  setup() {
    const commandes = [
      { numero: 1001, client: "Diallo", montant: 40.5, etat: "expédiée" },
      { numero: 1002, client: "Martin", montant: 89, etat: "en retard" },
      { numero: 1003, client: "Nguyen", montant: 16.4, etat: "préparée" },
    ];
    function total() {
      return commandes.reduce((somme, c) => somme + c.montant, 0);
    }
    return { commandes, total, euros };
  },
}).mount("#app");

Le texte de chaque ligne, et la classe de celles qui en ont une :

Numéro | Client | Montant | État
1001 | Diallo | 40,50 € | expédiée
1002 | Martin | 89,00 € | en retard   (class=en-retard)
1003 | Nguyen | 16,40 € | préparée
Total | 145,90 €

La couleur seule ne transmettrait l'information ni à un daltonien ni à un lecteur d'écran : l'état reste écrit (règle d'accessibilité vue au livre CSS). La classe contient un tiret, d'où les guillemets autour de la clé 'en-retard'.