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 代码的一部分引导到指定的 slot。参见下面的实例1。

内置的 <template> 元素本身不会呈现为 DOM 元素。

更多实例

实例 1

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