<template> 模板包裹元素
最后更新：2026-10-22
<template> 模板包裹元素
是透明的分组容器：本身不渲染元素，用于给 v-if / v-for 分组或多分支内容占位。
| 分组 | 内置组件与元素 |
|---|---|
| 类型 | 组件/元素 |
| 作用域 | 模板 |
| Vue 版本 | 3.0+ |
| SSR 支持 | 支持 |
📝 语法
<template v-if="ok">
<p>第一段</p>
<p>第二段</p>
</template>
<template v-for="item in list" :key="item.id">...</template>⚙️ 参数
| props | 配合 v-if / v-for / v-slot；本身没有渲染输出 |
|---|
▶ 示例
修改下面的代码，在预览区实时查看效果：
输出：
两段文字同时显示/隐藏（切换时不会留下空的包裹元素）。💡 要点
💡 提示 想给多个元素套同一个 v-if 时用它：避免多写一个无意义的 div。
ℹ️ 说明 DOM 模板里 也是插槽内容的载体（配合 v-slot）。
⚠️ 注意 v-for 写在 template 上时 key 也要写在 template 上（Vue 3 支持）。
🏷️ 相关内置组件与元素
💡 相关案例
更多案例即将上线。
📚 相关教程
❓ 常见问题
Q 它会出现在 DOM 里吗？
A 不会，它是编译期的透明容器。
Q 能给它加 class 吗？
A 不能：属性需要落在真实元素上，请改用 div 或给子元素加。
Q 和 slot 的 template 一样吗？
A 同一个标签两种用途：一个是分组，一个是具名插槽的载体。
