template标签：隐形的容器

• 不会渲染成真实DOM：浏览器最终呈现的页面中完全看不到它的存在
• 支持结构化指令：完美配合v-if、v-for等逻辑控制
• 可包裹多个元素：解决单个根元素的限制

<template>
  <div>元素A</div>
  <div>元素B</div>
</template>

渲染结果

<div>元素A</div>
<div>元素B</div>

v-show指令：优雅的显隐开关

• 通过display: none控制显隐
• 初始渲染成本较高（需要真实DOM）
• 适合频繁切换的场景

v-show必须作用于真实存在的DOM元素，才能直接操作其样式属性。

解决方法

• 套个 div
• 使用 v-if
• CSS选择器

.hidden-group > * {
  display: none !important;
}
<div class="hidden-group">
  <div>内容A</div>
  <div>内容B</div>
</div>