Vuejs 允许使用嵌套模板标签吗？

Question

是否允许在模板内使用<template>类似这样的标签？

我必须检查一些值。

<template>
    <div>
        <template v-for="category_field in category_fields">
            <template v-if="category_field.show_type == 'new-row'">
                //and also here can be more nested template tags
            </template>
            <template v-else>
                //and also here can be more nested template tags
            </template>
        </template>
    </div>
</template>

我在我的项目中使用这个系统，想知道这是否正确。

Answer 1

是的，您可以嵌套<template>s，有时这非常有用。

Vue<template>与<React.Fragment>. 它是一个虚拟容器，用于分组或应用布局逻辑（使用结构指令 - 例如：v-for, v-if），而不创建实际的 DOM 元素。

因为它不输出 DOM 元素，所以它被用作 SFC 的 HTML 标记的包装器。

从技术上讲，Vue 2 中只有一个子元素的限制不是来自标签<template>本身，而是来自组件，因为 Vue 要求它们只有一个根元素，该根元素成为组件的$el. 更多详细信息请参见此处。

除了包装 SFC 标记的典型用法之外，<template>标签还用于：

• 组合结构指令 ( v-for, v-if) 并让 Vue 知道应用指令的顺序，因为更改顺序可能会更改结果
• 一次将布局或渲染逻辑（例如：）应用于v-if多个元素，而无需在它们周围创建实际的 DOM 包装器，当您不想破坏 DOM 元素的父/子关系时（例如：flex 或 grid）特别有用父/子、<ul>/ <ol>+ <li>、<tr>+ <td>、<tbody>+<tr>等）。
• v-if减少模板样板（例如：从包装器上的多个同级中移动相同的模板<template>，因此条件仅写入一次）。