Vue.js是否有Angular命名模板的等价实现？附Angular示例代码

直接对应Angular的写法 #

Vue 里用 <template> 配合 v-if/v-else 就能实现和你贴的 Angular 代码完全等价的逻辑，不会渲染额外 DOM 节点，完美避免代码重复：

<template v-if="someCondition">
  Show Data
</template>

<template v-else>
  Show Spinner
</template>

复用模板片段（适合多处用同一加载状态） #

如果这个加载中的 spinner 要在多个地方复用，你可以把它定义成具名模板片段，不用重复编写 spinner 的代码：

<!-- 定义可复用的 spinner 模板 -->
<template #spinner>
  Show Spinner
</template>

<!-- 业务逻辑中引用模板 -->
<template v-if="someCondition">
  Show Data
</template>
<template v-else>
  <slot name="spinner"></slot>
</template>

补充说明 #

Vue 的 <template> 和 Angular 的 <ng-template> 作用类似，都是仅作为逻辑容器，不会生成实际 DOM 节点，用来包裹内容但不影响最终的 DOM 结构。Vue 里的 <template> 可以配合 v-if、v-for、插槽等指令，和 Angular 的 <ng-container>+<ng-template> 组合的作用完全匹配。

内容的提问来源于stack exchange，提问作者Tim