在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中有等效的东西吗?
您可以按此处的文档所述在模板上使用条件分组。该模板将用作不可见的包装。
<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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句