v-ifは、何らかの条件によって。要素を表示/非表示切り替える時に利用します。導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。例題ルートテンプレートに、p要素を配置して、表示、非表示を切り替えることをやってみましょう。実装それでは、実際にコードを書いていきましょう。空のルートテンプレートをマウントとした状態からはじめます。表示、非表示を切り替えるために使う、プロパティーを用意します。false}})次に、p要素を配置します。HTMLHellop要素にv-ifディレクティを設定します。値には、プロパティtoggleを指定します。id="app">Hello</div>動作確認プロパティがtoggleがtrueの時は、Helloと表示されています。toggleをfalseに変えてみましょう。Helloの文字が消えて何も表示されなくなりました。ここで、DOMツリーががどうなっているか観てみましょう。Helloを選択して、右クリック、検証をクリックします。Hello1Helloこのように、p要素が描画されています。id="app"><!----></div>というように、p要素がDOMから削除されています。利用時の注意点v-ifディレクティブでは、条件を満たさなかった場合、要素はDOMレベルで削除される点に、注意してください。要素を頻繁に表示/非表示を繰り返す用途の場合、描画コストが高くなる恐れがあります。対策としては、cssのdipsplayプロパティーを利用する、v-showディレクティブを利用します。v-showについては、次回以降の記事で学習していきます。v-ifについて学習しました。Vue.js!高度化するWeb開発のフロントエンド開発の課題を解決。通常は有料のコンテンツを特別に無料でお試し頂けます。programmingnaviFacebookページプログラミング入門ナビメルマガに今すぐ登録!ブログの更新情報やお得なクーポン情報などをお知らせします。・About・プライバシーポリシ。