条件付きレンダリング

Vueでは v-if ディレクティブを使って、ブロックを条件に応じてレンダリングできます。ブロックは、ディレクティブの式が真を返す場合のみレンダリングされます。

`v-if` の基本

v-if ディレクティブは、指定した式が真の場合のみ要素をレンダリングします。v-else は v-if に対する "else block" を示すために使用できます：

<button v-if="todo.done" type="button">
  ✅
</button>

<button v-else type="button">
  ⬜
</button>

重要なポイント：

プレイグラウンドでは、ToDoリストの「完了」欄にボタンとアイコン（例として絵文字を使います）を表示する部分で、まだ条件分岐ができていません：

<td class="text-center">
  <!-- ここに v-if/v-else でアイコンを切り替える処理を追加 -->
  {{ todo.done }}
</td>

現在は固定のテキストが表示されているだけで、ToDoの完了状態に応じたアイコンの切り替えができていません。

<td class="text-center"> 内に v-if と v-else を使って、完了状態（todo.done）に応じて異なるボタンとアイコンを表示してください：

参考実装：

<button type="button" class="button-icon">
  ✅
</button>

<button type="button" class="button-icon">
  ⬜
</button>

v-else 要素は、v-if 要素の直後になければなりません。それ以外の場合は認識されません。

v-if と v-else を実装すると：

もし行き詰まったら、以下のボタンをクリックして解答を見ることができます。

v-if と v-else を使うことで、状態に応じた柔軟なUIが実現できます！

リストレンダリング

Vueでは v-for ディレクティブを使って配列に基づいて項目のリストをレンダリングできます。これは ToDoリストのようなデータの一覧表示に非常に便利です。

コンポーネント化パート１

Vue.js のコンポーネントは、UI を小さな再利用可能な部分に分割するための基本的な単位です。特に Single File Components (SFC) を使うことで、HTML、CSS、および JavaScript を 1 つの .vue ファイルにまとめることができます。