AI Summary 38.11421.0 Vue3 模板标签 摘要 2026-07-19
Vue3 模板标签 <template> Vue3 选项式 API 在 Vue3 中，<template> 标签是一个非常核心的概念。 <template> 用于定义组件的模板结构，是 Vue 渲染页面的基础。 <template> 标签的基本概念 <template> 标签是 Vue3 中..
Vue3 模板标签 <template>
Vue3 选项式 API在 Vue3 中，<template> 标签是一个非常核心的概念。
<template> 用于定义组件的模板结构，是 Vue 渲染页面的基础。
<template> 标签的基本概念
<template> 标签是 Vue3 中用于定义组件模板的标签。本身不会被渲染到最终的 DOM 中，而是作为一个容器，用于包裹 Vue 的模板语法（如插值、指令等）。Vue 会根据 <template> 中的内容生成实际的 HTML 结构。
特点
- 非渲染标签：
<template>标签本身不会出现在最终的 DOM 结构中。 - 模板容器：用于包裹 Vue 的模板语法，如插值、条件渲染、列表渲染等。
- 支持多根节点：在 Vue3 中，
<template>标签可以包含多个根节点，而在 Vue2 中则只能有一个。
<template> 标签的使用场景
1. 定义组件模板
在单文件组件（.vue 文件）中，<template> 标签用于定义组件的模板部分。例如：
实例
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: "Hello Vue3",
description: "This is a Vue3 template example."
};
}
};
</script>
<div>
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: "Hello Vue3",
description: "This is a Vue3 template example."
};
}
};
</script>
2. 条件渲染
<template> 标签可以与 v-if 或 v-else 指令一起使用，实现条件渲染。例如：
实例
<template>
<div>
<template v-if="isVisible">
<p>This content is visible.</p>
</template>
<template v-else>
<p>This content is hidden.</p>
</template>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
};
</script>
<div>
<template v-if="isVisible">
<p>This content is visible.</p>
</template>
<template v-else>
<p>This content is hidden.</p>
</template>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true
};
}
};
</script>
3. 列表渲染
<template> 标签可以与 v-for 指令一起使用，实现列表渲染。例如：
实例
<template>
<ul>
<template v-for="item in items" :key="item.id">
<li>{{ item.name }}</li>
</template>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Orange" }
]
};
}
};
</script>
<ul>
<template v-for="item in items" :key="item.id">
<li>{{ item.name }}</li>
</template>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "Apple" },
{ id: 2, name: "Banana" },
{ id: 3, name: "Orange" }
]
};
}
};
</script>
<template> 标签的注意事项
- 不支持动态属性：
<template>标签本身不支持动态属性（如:class或:style等），因为在渲染时会被忽略。 - 避免嵌套使用：虽然
<template>标签可以嵌套使用，但过度嵌套可能导致代码可读性下降。 - 与
v-slot的配合：在 Vue3 中，<template>标签常用于定义插槽内容，例如：
实例
<template>
<MyComponent>
<template v-slot:header>
<h1>Header Content</h1>
</template>
<template v-slot:default>
<p>Default Content</p>
</template>
</MyComponent>
</template>
<MyComponent>
<template v-slot:header>
<h1>Header Content</h1>
</template>
<template v-slot:default>
<p>Default Content</p>
</template>
</MyComponent>
</template>
