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 元素。

注意:顶级 <template> 元素是使用 SFC (*.vue) 文件时的结构要求。对于此类顶级 <template> 元素，无法使用 Vue 指令。

更多示例

示例 1

使用内置的 <template> 元素封装多个元素，并使用 v-slot 指令将它们发送到特定的命名槽。

<template>
  <h1>App.vue</h1>
  <p>该组件有两个 div 标签，每个标签中有一个插槽。</p>
  <slot-comp>
    <template v-slot:bottomSlot>
      <h4>到底部插槽！</h4>
      <p>这个 p 标签和上面的 h4 标签通过模板标签上使用的 v-slot 指令定向到底部插槽。</p>
    </template>
    <p>这会进入默认插槽</p>
  </slot-comp>
</template>

运行示例 »

示例 2

使用 <template> 元素，可以通过 v-if 指令呈现多个元素。

<div id="app">
<template v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</template>
<p v-else>The word 'pizza' is not found in the text</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>

亲自试一试 »