はじめに

Nuxtで入力フォームを作る第二回。
現状のコードは前回の記事を見てください↓

やりたいこと

▼フォーム入力バインディング

v-modelを使うことは何となくわかるけれど、言語化するのが難しい・・

「dataを更新すれば HTML が更新されて、 HTML を更新すれば data が更新される」ようにしてくれる機能

v-modelはv-onとv-bindをまとめて一行で書くためのシンタックスシュガー（プログラミング構文の省略した書き方）。

今回であれば、チェックが入るor外れる　というデータを取得して、HTML側の表示を変えたい。
わかりやすいように、マスタッシュ構文を用いてチェックボックスの状態を表示する。

<input type="checkbox" v-model="isChecked">
<label for="checkbox1">追加入力項目を表示する {{ isChecked }}</label>

<script setup>
// `isChecked`の状態を初期化
// はじめはチェックが入っていない状態にする
let isChecked = ref(false);
</script>

チェックが入るとHTML側が「true」または「false」の表示になる。（マスタッシュ構文のところ）

v-ifを使うと表示・非表示を切り替えることができる。
v-if="isChecked"でisCheckedがtrueなら表示、falseなら非表示になる。

<div id="formArea" class="p-formArea" v-if="isChecked">

表示にかかわるvディレクティブにv-showがあるが、v-ifと何が違うのか？

▼v-if="条件"
条件の真偽によって表示非表示が切り替えられる。

非表示の時、DOMから要素自体が消える。（真偽が変わるたびにDOMが操作されてる）

▼v-show="条件"
v-ifと同様に、条件の真偽によって表示非表示が切り替えられる。
ただしv-ifと違って、偽であってもDOM上に要素自体は存在していて、display:none;（CSSの書き換え）で表示非表示を実現している。

v-elseのように、偽の時に別の表示をさせたい場合などはv-show="not 条件"と記述する必要がある。

▼どちらを使うべきか
v-ifは初期の記述が簡単だけれど、DOM操作を行うので表示面のコストが高い。
v-showは記述に配慮が必要だけれど、CSSの書き換えで表示非表示を切り替えているため表示面でのコストが低い。

よって、頻繁に表示非表示を変えないならばv-if、頻繁に切り替えたい時はv-showを使用する方が良いよう。

次回はフォームのinput部分をクリックすると、「お名前（姓）※必須」が入力部分上に移動するアニメーションをつける！！

・シンタックスシュガー