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>
定义和用法
当 HTML <template> 标签与 Vue 指令 v-if、v-else-if、v-else、v-for 或 v-slot 一起使用时，它将成为一个内置的 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: '我喜欢 taco、pizza、泰式牛肉沙拉、河粉汤和塔吉锅。'
}
}
})
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> 标签
