我不知道我们是否可以在Vue中的根template标签中使用<template>标签。代码如下：
<template>
<div class="bg-red-500 file">
<div v-for="page in pages" :key="page.id" class="page">
<div v-for="item_1 in page" :key="item_1.id" class="item_1">
<div v-for="item_2 in item_1" :key="item_2.id" class="item_2">
<template v-for="item_3 in item_2" :key="item_3.id">
<div v-for="item_4 in item_3" :key="item_4.id" class="item_4" :style="{textAlign: item_4.direction}">
{{ item_4.txt }}
</div>
</template>
</div>
</div>
</div>
</div>
</template>我试了代码，它工作正常。
这样使用Vue可以吗？
1条答案
按热度按时间ttp71kqs1#
**组件的根
<template>标签和模板内的标签是有区别的。**它们是不同的东西，碰巧使用相同的标签，在模板内使用标签实际上是模板“语法”的一个特性。作为一个标记，它 * 打算 * 在顶层模板中使用，作为模板化的一种手段（例如循环而不创建额外元素）。根据
<template>标签上的文档，它“当我们想使用内置指令而不渲染DOM中的元素时，它被用作占位符。”如果它至少存在v-if，v-else-if，v-else，v-for或v-slot中的一个，它将被Vue特殊处理。如果不是，“它将被渲染为native<template>element。引用有关区别的文档：
单文件组件使用顶级
<template>标记 Package 整个模板。这种用法与上述<template>的用法是分开的。该顶级标记不是模板本身的一部分，并且不支持模板语法，例如指令。