点击后标题切换按钮消失的原因及修复方案

原因分析 #

你的代码里按钮使用了v-if="!show"指令：初始状态show为false，按钮正常渲染显示；点击按钮后show被设置为true，v-if的条件不成立，按钮直接从DOM中被移除，所以会消失。另外当前按钮的点击逻辑只有show = true，没有切换状态的处理，就算按钮不消失，也无法实现关闭内容的功能。

修复方案 #

方案一：保留按钮，实现切换功能 #

让按钮始终存在，点击时切换show的布尔值，同时可以动态修改按钮文本提示用户当前操作：

<script>
const show = ref(false);
</script>

<template>
  <div class="w-full md:w-1/2 mx-auto my-12 border-8 border-black">
    <button class="bg-blue-500" @click="show = !show">
      <h2>{{ show ? '点击关闭内容' : 'Hello title, click to open or close content' }}</h2>
    </button>
    <div v-show="show" class="bg-red-500">
      <p>The content becomes available when you click to open, and is hidden when clicked again to close.</p>
    </div>
  </div>
</template>

方案二：保留原打开按钮逻辑，添加关闭按钮 #

如果希望打开内容后隐藏原按钮，可在内容区域添加关闭按钮，点击后重置show状态，让原按钮重新显示：

<script>
const show = ref(false);
</script>

<template>
  <div class="w-full md:w-1/2 mx-auto my-12 border-8 border-black">
    <button v-if="!show" class="bg-blue-500" @click="show = true">
      <h2>Hello title, click to open or close content</h2>
    </button>
    <div v-show="show" class="bg-red-500">
      <p>The content becomes available when you click to open, and is hidden when clicked again to close.</p>
      <button class="bg-gray-500 mt-2" @click="show = false">关闭内容</button>
    </div>
  </div>
</template>

内容的提问来源于stack exchange，提问作者Boq7