标签不渲染为 dom，但可作为逻辑容器配合 v-if 等指令批量控制多个兄弟元素的条件渲染，避免冗余包装节点；v-show 不支持 ，必须作用于真实元素。

在 Vue 3 模板语法中，<template></template> 标签本身不会被渲染成 DOM 元素，但它可以作为“逻辑容器”配合 v-if 等指令，一次性控制多个兄弟元素的条件渲染，避免引入多余的包装节点（比如无意义的 <div>）。 <h3>为什么需要用 <template> 包裹多个元素</template> </h3> <p>因为 <code>v-if 必须绑定在某个真实标签上，不能直接写在模板顶层或跨多个并列元素。如果想让一组元素（如 <h2></h2>、<p></p>、<button></button>）整体根据条件显示或隐藏，又不想额外加一层 DOM 节点，<template></template> 就是标准解法。

基本写法：在

把需要条件控制的多个元素放在一个 <template></template> 内，并在其上添加条件指令：

• v-if、v-else-if、v-else 必须连续书写，中间不能插入其他元素
• <template></template> 不会出现在最终 HTML 中，只起编译时逻辑分组作用
• 支持嵌套，也可以和 v-for 组合使用（但注意优先级，通常建议用计算属性或 <template></template> 外层包裹）

示例：

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

v-show 不能用于

v-show 只能作用于单个真实元素，它通过切换 display: none 控制显隐，不支持 <template></template>。如果需要对多元素做高频显隐切换，得分别给每个元素加 v-show，或者用一个外层容器（如 <div>）统一控制。 <h3>常见错误提醒</h3> <ul> <li>误在 <code><template></template> 内写 v-show —— 会报错或无效

在 v-if 和 v-else-if 之间插入注释、空行或其它标签 —— 导致指令链断裂，v-else-if 不生效

把响应式变量写成字符串字面量（如 v-if="status === 'loading'" 正确；v-if="'status' === 'loading'" 错误）