vue.js 단위의 각 ng-container 당량

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가 있고 안에 있는 요소들이 무엇을 하는지 규정합니다.

이제 만약 내가 요소를 일반 div로 감싸면 그것은 나의 플렉스 스타일을 망가뜨릴 것입니다. 하지만 그 이유는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>

언급URL : https://stackoverflow.com/questions/55827644/angular-ng-container-equivalent-in-vue-js