リストのレンダリング
この演習で学習する内容
v-forディレクティブによるレンダリング
演習内容
最初のステップ
<input type="text">タグでタスク登録できるTODOアプリケーションを作成してみましょう。
登録したタスクは、v-forディレクティブを使って<li>タグなどを使ってタスク一覧として画面に表示するようにしてみましょう。
また、一覧として表示されたタスクを削除できるようにしてみましょう。
最初のステップが終わったら
これらができたら、登録するタスクを以下のようなデータ構造で情報をを扱うように変更してください。
name: 登録したタスク名 (String)done: タスクの完了状態 (Boolean: デフォルトfalse)
タスクの完了状態であるdoneを<input type="checkbox">タグなどで制御できるようにし、表示されたタスクの見た目も完了状態であることが分かるようにしてみましょう。