在Vuetify中使用<template>的目的是什么？

Question

我想在我的项目中使用Vuetify 2.0，目前正在阅读有关v-stepper组件的信息，该组件用于通过编号的步骤显示进度。

在提供的playground example中，我看到他们正在使用<template>元素来包装v-stepper组件的内容。 HTML看起来像这样（注意：我删除了不必要的细节）：

<v-stepper>
  <template v-for="n in steps">
    <v-stepper-content
      :key="`${n}-content`"
      :step="n"
    >

    </v-stepper-content>
  </template>
</v-stepper>

注意使用的<template>标签。目的是什么？我应该何时使用它，而不是将<v-stepper-content>直接放在<v-stepper>里面？

我已经阅读了一些有关 element on MDN的内容，但是我不确定如何将其专门用于Vuetify（或更普遍地将其用于Vue.Js或纯HTML / CSS / JS）。

Answer 1

在<template>循环中，

v-for是一个组织性项。

它不会被浏览器渲染。它可以帮助您处理更复杂的渲染情况，您不想将自己限制在一个元素上

在大多数情况下，您可以对项目进行非常简单的映射，数组中的每个项目都会获得一个<li>元素。在这种情况下，您不太可能使用它。

这是一个可能对您有帮助的问题的例子...

假设您要遍历对象数组，如果对象是按钮，则渲染v-btn，如果对象是图像，则渲染v-image。

没有模板...

  <span v-for="item in items">
    <v-btn v-if="item.isBtn"></v-btn>
    <v-img v-else-if="item.isImg"></v-img>
  </span>

问题在于每个项目都将被包裹在跨度中。

<span>
  <v-btn/>
</span>
<span>
  <v-img/>
</span>
<span>
  <v-btn/>
</span>

但是，如果您使用template元素，则包装元素将不再存在。

  <template v-for="item in items">
    <v-btn v-if="item.isBtn"></v-btn>
    <v-img v-else-if="item.isImg"></v-img>
  </template>

您将得到...

  <v-btn/>
  <v-img/>
  <v-btn/>

您还可以让它在循环的一个实例中返回多个项目。

在https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt的vue文档中

它显示了一个示例，该示例在每次迭代中渲染多个项目：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

在其他一些情况下，这可能会有所帮助，但不太可能使您每天遇到一些问题。

---

TL; DR;

Vue不会呈现<template>元素。它有助于在循环时组织代码块，而无需单个子元素

---

第2部分。

  

    

我应该何时使用它，而不是直接将它放在？内部？

  

由于垂直和水平步进器的结构不同，因此vuetify作者在操场上使用它来允许用户切换它。使用第一级模板（<template v-if="vertical">）来确定下一级应将v-stepper-step元素呈现为垂直还是水平。第二级用于迭代项目。

示例：

垂直（步骤和内容均为同级）：

<template>
  <v-stepper v-model="e6" vertical>
    <v-stepper-step :complete="e6 > 1" step="1">
      Select an app
      <small>Summarize if needed</small>
    </v-stepper-step>

    <v-stepper-content step="1">
      <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
      <v-btn color="primary" @click="e6 = 2">Continue</v-btn>
      <v-btn text>Cancel</v-btn>
    </v-stepper-content>


    <v-stepper-content step="2">...</v-stepper-content>

    <v-stepper-step :complete="e6 > 3" step="3">...</v-stepper-step>

  </v-stepper>
</template>

水平（每个步骤都是单独的）：

<template>
  <div>
    <v-stepper>
      <v-stepper-header>
        <v-stepper-step step="1">Select campaign settings</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2">Create an ad group</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">Create an ad</v-stepper-step>
      </v-stepper-header>
    </v-stepper>

    <v-stepper value="2" class="mt-12">
      ...
    </v-stepper>

    <v-stepper value="3" class="mt-12">
      ...
    </v-stepper>
  </div>
</template>

Answer 2

它真的没有。当您不想在代码中添加另一个div但需要在父级上使用v-for时使用它。您可以将其从代码中删除，并且不会有任何变化。我宁愿不使用它们，因为它们在IE中的支持有限。