Угловой эквивалент ng-контейнера в vue.js

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, который имеет гибкую позицию, а также правила о том, что делают элементы внутри ..

Теперь, если я оберну элементы в обычный 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>