一：v-show底层原理

1：v-show 本质是通过 CSS 的 display: none 控制元素的显示/隐藏，‌它必须作用在一个真实的 DOM 元素上‌。

2：Vue 需要找到对应的 DOM 节点，才能修改其 display 属性

二：<template>特性

1：<template> 是 Vue 提供的‌逻辑容器标签。

2：不会渲染成真是的DOM元素，仅用作包裹多个子元素的“隐形”父级。

3：在 Vue 的虚拟 DOM 中会被处理为一个“片段”（Fragment），没有对应的实际 DOM 节点。

三：核心原因

1：v-show 需要操作真实 DOM 的样式，而 <template> 本身不会生成任何 DOM 元素， 无法找到目标节点去修改 display 属性，导致‌逻辑失效

四：解决方案

1：采用v-if

<!-- 使用 v-if 控制片段 -->
<template v-if="isVisible">
  <div>Child 1</div>
  <div>Child 2</div>
</template>

2：保留DOM

<!-- 包裹一个真实元素并使用 v-show -->
<div v-show="isVisible">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

五：总结

1：v-show 需要真实 DOM‌ → <template> 没有真实 DOM → 无法使用

2：v-if 控制代码块渲染‌ → <template> 可作为逻辑容器 → 可以使用