## 問題1. クラスバインディング（オブジェクト構文） `v-bind`には`class`を動的に変化させる**クラスバインディング**があります。このチャレンジでは**クラスバインディング**の**オブジェクト構文**について学びましょう。 **クラスバインディング**の**オブジェクト構文**は、次のコードのようにクラス名とプロパティ名をセットで使用します。プロパティが`true`と判定される場合、タグにクラスが適用されます。 ```html <タグ v-bind:class="{ クラス名: プロパティ名 }"> <タグ :class="{ クラス名: プロパティ名 }"> ```

###### index.html 今回は、`isDone`というプロパティを使います。`isDone`プロパティを使用することで、`true`と判定される時に`done`というクラスを適用できます。次の`pタグ`をコピー&ペーストして、`done`クラスが適用され、取り消し線が表示されることを確認しましょう。また`isDone`を`false`に変更すると`done`クラスの適用が取り除かれ、取り消し線も非表示になることを確認しましょう。 ```html

課題1

```

## 問題2. クラスバインディング（配列構文） **クラスバインディング**には**配列構文**という書き方もあります。 **クラスバインディング**の**配列構文**は、次のコードのように**オブジェクト構文**やプロパティをまとめて指定できます。 ```html <タグ v-bind:class="[オブジェクト構文, プロパティ名等]"> <タグ :class="[オブジェクト構文, プロパティ名等]"> ```

###### index.html 今回は、`isDone`と`importantTask`いうプロパティを使います。 `isDone`プロパティを使用することで、`true`と判定される時に`done`というクラスを適用できます。 `done`クラスが適用されると取り消し線が表示されます。また`importantTask`プロパティを使用することで、`important`というクラスを適用できます。 `important`クラスが適用されると文字が赤色に表示されます。次の`pタグ`をコピー&ペーストして、それぞれのクラスが適用されていることを確認しましょう。 ```html

課題2

```

スキル図鑑

.css-x7cx95{padding:var(--chakra-space-2);}@media screen and (min-width: 600px){.css-x7cx95{padding:0px;}}v-bind,attr

コーディングにチャレンジしよう！

v-bind,attr