単純に特定の表見の時だけ、その要素が「DOMエレメントとして」存在する、というもの。
v-show は、Vueの公式サイトの説明がわかりにくい。
v-showは、必ずそのエレメントは存在するが、CSSで、表示・非表示を切り替える
<script setup>
import {ref} from 'vue'; // reactiveの代わりにrefを使用
const isHidden = ref(false); // 初期状態は表示
const divhide = () => {
isHidden.value = true; // 非表示にする
};
</script>
<template>
<div v-show="!isHidden">あああ</div> <!-- isHiddenがfalseの時に表示 -->
<button @click="divhide">NO</button>
</template>