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

烟熏道森

在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中有等效的东西吗?

斯蒂芬·S

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

<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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章