1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Vue.js】v-ifとv-showの違い

Posted at

#はじめに
こんにちは!
今回は【Vue.js】v-ifとv-showの違いについてアウトプットしていきます!

#v-ifとv-showの違い

##v-if
・要素をDOMから削除・追加することで表示/非表示を切り替える。
⏩切り替えコストが高い。
・v-else、v-else-ifが使える。

##v-show
・CSSのdisplayプロパティを使って表示/非表示を切り替える。
⏩初期描画コストが高い。
・v-else、v-else-ifが使えない。

#まとめ
・v-ifは実行時に条件を変更することはほとんどない場合に使用するのが推奨されます。
・v-showは表示/非表示を頻繁に繰り返す場合に使用するのが推奨されます。

#最後に
今回はv-ifとv-showの違いについてアウトプットしました。
今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。

今後ともQiitaにてアウトプットしていきます!

最後までご愛読ありがとうございました!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?