条件に沿ってクラスを付け替えてみよう
次のような在庫データの配列があります：
const products = [
{ name: "りんご", stock: 2 },
{ name: "バナナ", stock: 8 },
{ name: "ぶどう", stock: 0 },
{ name: "みかん", stock: 13 },
];このデータを<table>で表示してください。
さらに、在庫数（stock）に応じてセルの背景色を切り替えてください。
スタイルはTailwind CSSを使い、それぞれ以下のクラスを利用して色分けしてください。
- 在庫がしきい値以下：
bg-yellow-100 - 在庫がしきい値より多い：
bg-green-100
しきい値は5個とします。
表示例
| 商品名 | 在庫数 |
|---|---|
| りんご | 2個 |
| バナナ | 8個 |
| ぶどう | 0個 |
| みかん | 13個 |
ベースとする<table>の例
<table class="w-full border-collapse border border-stone-300 [&_th,td]:border [&_th,td]:border-stone-300 [&_th,td]:p-2">
<thead class="bg-stone-100">
<tr>
<th>商品名</th>
<th>在庫数</th>
</tr>
</thead>
<tbody>
<tr>
<td>りんご</td>
<td>X個</td>
</tr>
</tbody>
</table>ヒント
ヒントを見る
- クラスを動的に切り替えるには、
v-bind:class（省略形:class）を使います。これをクラスバインディングと呼びます。 - クラスを条件で切り替えたいときは、
:classの中で三項演算子を使うと簡潔に書けます。 - 在庫数がしきい値以下かどうかを条件式にして、2種類の背景色クラスを切り替える方法を考えてみましょう。このとき、しきい値は定数として定義するのがおすすめです。
チャレンジ課題
在庫が0個のとき、セルの背景色を赤色（bg-red-100）にしてください。
ヒント： 算出プロパティを使って実装するのがおすすめ！公式ドキュメントを参考にしてみましょう。