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

Question

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

在提供的游乐场示例中，我看到他们正在使用<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>?

我在 MDN 上阅读了一些关于element 的内容，但我不确定如何专门与 Vuetify 一起使用它（或者更一般地与 Vue.Js 或纯 HTML/CSS/JS 一起使用）。

Answer 1

a<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; 博士;

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

第2部分。

我什么时候应该使用它而不是直接将 ?

由于垂直和水平步进器的结构不同，vuetify 作者在playground 中使用了它，以允许用户切换它。模板的第一级 ( <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>