【Vue.js】v-ifとv-showによってhtmlの表示を切り替えたい
SPAにも重要な機能であるページ切り替え。
これを実現するのが、v-ifとv-showです。
以下はv-ifを使用し、selectオプションによって表示内容を切り替えるというもの。
See the Pen
v-ifで表示切り替え by りっしー (@hiwriterprogram)
on CodePen.
以下はv-showを使用し、selectオプションによって表示内容を切り替えるというもの。
See the Pen
v-showで表示切り替え！ by りっしー (@hiwriterprogram)
on CodePen.
v-ifとv-show 何が違うのか？
v-ifは、表示されるコード以外は全てコメントアウトされています。
v-showは、表示されるコード以外に対して style="display:none"が与えられています。
頻繁に画面を切り替えるようなサイトの場合、描画コストの高いv-ifよりもv-showを用いることが推奨されています。
一方で最初の描画の際、v-showの方が時間が時間がかかってしまうというデメリットもあるようです。
