javascript - vue.js 中的 Angular ng-container 等价物

Question

在 Angular 中有一个标签叫做 ng-container像这样使用

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

现在按照 Angular 文档

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

现在这在 Angular 上非常方便，因为我经常想在不使用 <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>