vue.js中的等效ng-container等效项

Question

在Angular中，有一个ng-container像这样使用的标签

<ng-container *ngIf="false">this wont be shown</ng-container>

现在按照角度文档

Angular是一个分组元素，不会干扰样式或布局，因为Angular不会将其放在DOM中。

现在，这在角度上确实非常方便，因为很多时候我想将一组html元素分组而不使用 <div></div>

例如

<div class="flex-div">
    <ng-container *ngIf="true">
       <img src="cool-img" alt="awesome">
       <h1>Cool Title</h1>
       <p>Cool Text</p>
    </ng-container>
    <ng-container *ngIf="false">
       <img src="not-so-cool-img" alt="awesome">
       <h1>Not So Cool Title</h1>
       <p>Not So Cool Text</p>
    </ng-container>
</div>

在这里，我有一个div，上面有flex的位置，并且还确定了内部元素的作用。

现在，如果我将元素包装在普通的div中，它将破坏我的flex样式，但其中ng-container包含了我的元素，但不会呈现给它们DOM

Vue中有等效的东西吗？

Answer 1

您可以按此处的文档所述在模板上使用条件分组。该模板将用作不可见的包装器。

<div class="flex-div">
<template v-if="true">
   <img src="cool-img" alt="awesome">
   <h1>Cool Title</h1>
   <p>Cool Text</p>
</template>
<template v-if="false">
   <img src="not-so-cool-img" alt="awesome">
   <h1>Not So Cool Title</h1>
   <p>Not So Cool Text</p>
</template>
</div>