Question

我试图理解<template>及其功能的用例。在引用the docs之后，我仍然相当困惑。

考虑 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>的情况有何不同？{/ 1>

Answer 1

根据我的理解，使用<template>不会在DOM中渲染出额外的元素。当您有条件地添加多个不完全需要父<div>的元素时，它会特别有用。如果<div>除了条件多个标签之外没有任何用途，那么可以在没有额外<div>的情况下完成。

我通常默认使用<template>，直到我需要<div>或其他元素作为父容器，主要是为了应用样式。

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>

了解更多：

Answer 3

模板标记内的内容将呈现在DeriveFunctor文件的视图中。

Answer 4

如果你使用简单的div，外部CSS，图像等资源将被加载即使你使用css隐藏你的div

按照以下链接了解为什么模板在html5中引入

template introduction

在VueJS 2的<template>中使用<template>是什么意思？

4 个答案: