Vue.js　

説明

v-showは、Vue.jsのディレクティブの1つであり、要素の表示/非表示を切り替えるために使用されます。

このディレクティブは、要素に対してブール値をバインドし、その値に応じて要素の表示/非表示を制御します。

v-showがtrueの場合、要素は表示され、falseの場合、非表示になります。このディレクティブはv-ifと異なり、要素をDOMから完全に削除するのではなく、要素のスタイルを変更するだけなので、切り替えがより高速です。

例

以下は、v-showディレクティブを使用して、ボタンをクリックすると要素の表示/非表示を切り替える簡単な例です。

<template>
  <div>
    <button @click="isVisible = !isVisible">ボタン</button>
    <p v-show="isVisible">表示するテキスト</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true,
    };
  },
};
</script>

上記のコードでは、isVisibleという名前のデータプロパティを定義し、初期値をtrueに設定します。

v-showディレクティブを使用して、要素がisVisibleの値に応じて表示/非表示されるように設定しています。ボタンをクリックすると、isVisibleの値が反転し、要素が表示/非表示を切り替えます。