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

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

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

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

1 个答案: