Vue3 v-show ディレクティブ
Vue3 組み込みディレクティブv-showディレクティブは、式の真偽値に基づいて要素の可視性を切り替えます。CSS の display プロパティを使用して要素の表示と非表示を制御します。
基本説明
v-showディレクティブは、バインドされた式の真偽値に基づいて要素を表示するかどうかを決定します。条件が真でも偽でも、要素は DOM にレンダリングされ、CSS によってその可視性が制御されるだけです。
- 期待される型: any
- 機能: 式の真偽値に基づいて要素の可視性を切り替え、CSS の display プロパティで制御します。
v-show と v-if の違い
| 特性 | v-show | v-if |
|---|---|---|
| レンダリング方法 | 常に DOM にレンダリングされ、表示/非表示のみを制御する | 条件が真の場合にレンダリングされ、偽の場合にはレンダリングされない |
| 切り替えパフォーマンス | 切り替えコストが小さい（CSS のみ変更） | 切り替えコストが大きい（要素の作成/破棄が必要） |
使用シーン
1、表示状態を頻繁に切り替える
要素の表示/非表示を頻繁に切り替える必要がある場合、v-show を使用する方がパフォーマンスが良いです：
例
<template>
<div>
<button @click="showModal = true">ポップアップを開く</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>これはポップアップです</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
<div>
<button @click="showModal = true">ポップアップを開く</button>
<div class="modal" v-show="showModal" @click="showModal = false">
<div class="modal-content" @click.stop>
<p>これはポップアップです</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { showModal: false }
}
}
</script>
その他の拡張