スタイル変更
チェックがついたものに横線を入れてみましょう。
HTMLの該当部分を次のように変更します。
<span :style="{ textDecoration: item.checked ? 'line-through' : 'none' }">
{{item.title}}
</span>
:styleはv-bind:styleの略です。
スタイルの中身はオブジェクト形式で書きます。
textDecorationはtext-decorationに相当します。
課題
- 上記の動作を確認する
- 横線ではなく色を変えてみる
- cssを定義して
:classを使って表示を変えてみる