Liquidsのロゴ Liquids

v-showとv-ifの違いについて【Vue3】

Vue.js
Nuxt.js

v-showはv-ifと同じく、条件の真偽によって要素を表示・非表示を切り替えるものです。

<div v-show="isCheck">true</div>
<div v-if="isCheck">true</div>
<div v-else>false</div>

非表示時にDOMが残るか残らないかが2つの大きな違いになります。
v-ifは非表示時にDOM自体を削除するのに対して、v-showは非表示時もDOM残すことができます。
v-showの方がレンダリングの負荷が小さいため、 頻繁に切り替わる場合はv-showを使うのがおすすめです

Liquidsのロゴ Liquids

Liquidsは誰でも投稿・編集ができる技術Wikiコミュニティ📝です。

あなたもLiquidsで技術Wikiを
書いてみませんか?