v-if で表示・非表示を切り替える | Vue3 Hands-onv-if で表示・非表示を切り替える 本章の概要とゴール 購入しようと思った商品が売り切れで購入できないと、せっかく購入しようとしたユーザーをがっかりさせてしまいます。 本章では、v-if ディレクティブを使って売り切れの商品は非表示にするようプログラムを改修していきます。 本章を実践すると、特定の条件の時だけ HTML を表示させることができるようになり、v-if の使い方が理解できます。 v-if の書き方 Vue.js では特定の条件の時だけ DOM を生成し表示できる、v-if というディレクティブが用意されています。以下のように、表示・非表示を制御したい DOM 要素に v-if を追加します。v-if の値が true の場合は表示され、 false の場合は表示されません。 html<!-- 表示される --> <div v-if="true">something</d
