Vue <template> 元素
示例
使用内置的 <template> 元素，通过 v-if 指令来切换 HTML 代码块。
<ul>
<li>Trolltunga</li>
<template v-if="display">
<li>Potato Point</li>
<li>The souks of Marrakech</li>
<li>Dry Tortugas</li>
<li>Halong Bay</li>
</template>
<li>...</li>
</ul>
定义和用法
当与 Vue 的 v-if、v-else-if、v-else、v-for 或 v-slot 指令一起使用时，HTML 的 <template> 标签会成为内置的 Vue <template> 元素。
当与 v-if、v-else-if、v-else 或 v-for 一起使用时，内置的 <template> 元素会渲染一个 HTML 代码块。
当与 v-slot 一起使用时，内置的 <template> 元素会将一个 HTML 代码块定向到一个指定的插槽。请参见下面的示例 1。
内置的 <template> 元素本身不会被渲染为 DOM 元素。
注意： 当使用 SFC（*.vue）文件时，顶层 <template> 元素是结构要求。对于这种顶层的 <template> 元素，不能使用 Vue 指令。
更多示例
示例 1
使用内置的 <template> 元素封装多个元素，并通过 v-slot 指令将它们发送到特定的命名插槽。
<template>
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
</template>
示例 2
使用 <template> 元素，可以使用 v-if 指令渲染多个元素。
<div id="app">
<template v-if="text.includes('pizza')">
<p>文本包含“pizza”一词</p>
<img src="img_pizza.svg">
</template>
<p v-else>文本中未找到“pizza”一词</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
自己动手试一试 »
相关页面
Vue 教程：Vue v-slot
Vue 教程：Vue 模板
Vue 教程：Vue v-if 指令
Vue 参考：Vue v-if 指令
Vue 参考：Vue v-slot 指令
HTML 参考：HTML <template> 标签
