VueJS 2中，<template>内嵌<template>有什么用处？

Question

我将为您翻译IT技术相关内容。请参考以下代码，其中包含了<template>和它的功能，通过查阅文档，我还是有些困惑。

在any.vue文件中，考虑以下代码：

<template>
   <div class="top-right links">

      <!-- Why use <template> here instead of a div, for example? -->
      <template v-if="authenticated">
         <router-link :to="{ name: 'home' }">
            {{ $t('home') }}
         </router-link>
      </template>

      <template v-else>
         <router-link :to="{ name: 'login' }">
            {{ $t('login') }}
         </router-link>
      </template>

   </div>
</template>

为什么我们要使用<template>而不是简单的<div>，以及使用<template>与使用<custom-component>有什么不同？

- Michał

Answer 1

根据我的理解，使用<template>标签不会在DOM中渲染出多余的元素。它特别适用于当您有条件地添加多个元素但并不需要一个父级<div>的情况。如果<div>除了条件多个标签之外没有任何作用，那么可以不必添加额外的<div>。

我通常会默认使用<template>标签，直到需要使用<div>或其他元素作为父容器来应用样式为止。

- kai

Answer 2

你说得对，在你的情况下，你应该简单地使用这个：

您需要在此处使用以下代码：

<template>
   <div class="top-right links">
     <router-link v-if="authenticated" :to="{ name: 'home' }">
        {{ $t('home') }}
     </router-link>
     <router-link v-else :to="{ name: 'login' }">
        {{ $t('login') }}
     </router-link>
   </div>
</template>

假设您需要使用多个条件标签而不使用父标签，请按如下格式编写代码：

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
</template>

阅读更多：

• 使用v-if在<template>上的条件组
• v-for在<template>上的列表渲染

- soju

Answer 3

.vue文件中主<template>中使用<template>意味着我们想使用一个不可见的包装器。现在的问题是什么时候需要使用不可见包装器？答案很简单：每当我们想为一组元素（而不是单个元素）使用v-if、v-else或v-for指令时。

因此，在这种情况下，我们使用以下方式包装所有提到的元素组：

<template v-if=" "></template>

通过这样做，我们只需呈现上述<template>标签之间的内容，无需创建冗余的<div>，然后在呈现后，<template>标记本身将不存在于DOM中，因此它作为不可见的包装器能够良好地完成其工作。

- Hamid Heydari

Answer 4

模板标签内的内容将被渲染到 .vue 文件中的视图中。

- Mihir Dass

---

确切地说，这就是为什么我不明白为什么你会在模板中使用<template v-if="authenticated">，而不是使用<div v-if="authenticated">的原因所在... - Michał

@Michał，以上两种情况都可行，但如果您需要元素成为兄弟元素或不想在多个元素周围包装器但仍然想有条件地渲染它们，则应使用template而不是div，因为它不会出现在DOM中。 - JordanBarber

Answer 5

如果您使用简单的<div>，即使使用CSS隐藏了<div>，外部CSS、图像和其他资源也会被加载。

请点击以下链接了解为什么HTML5引入了<template>。

模板介绍

- rupesh_padhye