在 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

v-for 循环上下文中的 <template> 是一个组织项。

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

在大多数情况下，您有一个非常直接的项目映射，数组中的每个项目都有一个<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 作者在 Playground 中使用它来允许用户切换它。模板的第一层 (<template v-if="vertical">) 用于确定下一层应该将 v-stepper-step 元素呈现为垂直还是水平。第二层用来做item的迭代。

示例：

vertical（step 和 content 是同级的）：

<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>