vue.js 中的 Angular ngcontainer 等效项

发布于04月24日

在Angular中，有一个名为ng-container的标签这样使用

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

现在根据文件

Angular是一个分组元素，它不会干扰样式或布局，因为Angular不会将其放入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中，它将 destruct 我的flex样式，但在ng-container中，它包含我的元素，但不会呈现给它们

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>

vue.js 中的 Angular ngcontainer 等效项

推荐答案

Vue.js相关问答推荐

Vue CDN的html工作，但v—如果不工作

使用nuxt I18N验证规则消息翻译

如何将外部 svg 转换为 Vue3 组件？

Vuetify 复选框未正确显示值

如何在 vue js 的一页路由下显示不同的 category._id

拖入 vue2-google-map 后如何获取标记位置？

Vue-tables-2(vuex)react性不起作用

vuetifyjs：仅添加使用过的图标来构建

Vue 和 Bootstrap Vue - 动态使用插槽

Vue.js 如何计算总数？

在 vue 组件中检索配置和环境变量

Vuetify - 根据另一个 Select 选项过滤 Select 数据

使用 nuxt，如何将路由名称放在页面标题中？

如何从 vue-apollo 中访问 this.$route？

了解 Nuxt.js 中的State状态和Getters：Getters不起作用

单击时交换组件

从子组件 Vue 更新父模型

vue 未在实例上定义，但在渲染期间引用

v-if 未在计算(computed)属性上触发

在Vue中调用方法时的括号