Vue3 ディレクティブ

v-bind:class, v-bind:style

https://v2.ja.vuejs.org/v2/guide/class-and-style

v-if, v-else

vueでif文によって表示を分けたい時に使用する。
条件が「true」の時は、v-ifで指定したタグの部分が表示され、「false」の時は、v-ifのタグの直後に記述したv-elseのタグが表示される。

<タグ v-if="条件">・・表示内容・・</タグ>
<タグ v-else>・・表示内容・・</タグ>

v-for

配列の値を順に取り出し、繰り返し表示したい時に利用する。

<タグ f-for="変数 in 配列">・・表示内容・・</タグ＞

第２引数でインデックス番号を取り出すことができる。

<タグ v-for="( 要素, インデックス ) in 配列">・・表示内容・・</タグ>

配列の他にオブジェクトも順に取り出し、繰り返し表示することができる。

<タグ v-for="( 値, キー ) if オブジェクト">・・表示内容・・</タグ>