## 問題1. v-ifを使用して条件分岐による表示の切り替えを実装しましょう `v-if`は次のコードのようにhtmlのタグに対して使用することでdataプロパティの値によって表示を切り替えることができます。 `v-if`に指定したプロパティが`true`と評価される場合表示され、`false`と評価される場合は非表示になります。 ~~~html <タグ v-if="プロパティ名/条件式"> ~~~

###### index.html `data`に`isShow`というプロパティを追加しているので、次のコードをプロパティの値に応じて表示を切り替えてみましょう。 ~~~html

テキスト

~~~

## 問題2. v-elseを使用して条件分岐による表示の切り替えを実装しましょう `v-else-if`は`v-if`が`false`と評価される場合に条件分岐をして、表示を切り替えることができるディレクティブです。また`v-else`は`v-if`や`v-else-if`が`false`と評価される場合に表示されます。 `v-else`と`v-else-if`は`v-if`を記述しているタグの直後のタグにしか使用できません。 ~~~html <タグ v-if="プロパティ名/条件式"> <タグ v-else-if="プロパティ名/条件式"> <タグ v-else> ~~~

###### index.html `data`に`count`というプロパティを追加しているので、`count`の値によって表示が切り替わる3つの`

`タグを追加しましょう。 `count`の値を自由に変更して実際に表示が変更することも確認しましょう。 ~~~html

0です

1です

0でも1でもありません

~~~

スキル図鑑

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

クイズにチャレンジしよう！

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

v-if,v-else