vue.js 中的 Angular ng-container 等效項

Question

在 Angular 中有一個名為ng-container的標簽，像這樣使用

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

現在根據角度文檔

Angular 是一個不會干擾樣式或布局的分組元素，因為 Angular 不會將其放入 DOM 中。

現在這在角度上真的很方便，因為我經常想在不使用<div></div>的情況下對一組 html 元素進行分組

例如

<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>