vue.js - 如何在 Vue SFC 中使用条件模板标签

Question

我有两种使用我的应用程序的模式，一种是嵌入式模式，一种是非嵌入式模式。对于嵌入式(想想 iframe)模式，我不想显示站点页眉和页脚。我尝试在 App.vue 中使用 v-if 和 v-else，但 Visual Studio Code 提示有多个模板根元素。这似乎应该被允许:

<template v-if="embedded">
  <div id="app">
    <MyContent/>
  </div>
</template>
<template v-else>
  <div id="app">
    <TheHeader/>
    <MyContent/>
    <TheFooter/>
  </div>
</template>

如果有任何想法，我将不胜感激。它是 VS Code 中的错误吗？这是不允许的吗？

谢谢。

Answer 1

在带有常规 .vue 文件的 vue2 中，您必须有一个根目录。因此，您可以通过将整个内容包装在一个 div 中来实现这一点。

<template>
  <div>  
    <template v-if="embedded">
      <div id="app">
        <MyContent/>
      </div>
    </template>
    <template v-else>
      <div id="app">
        <TheHeader/>
        <MyContent/>
        <TheFooter/>
      </div>
    </template>
  </div>
</template>

您也可以使用功能组件来完成您所说的内容，但我会避免这种情况，除非您熟悉更多的 jsx 样式或对 hyperscript 有更强的 js 知识。 https://zendev.com/2018/05/07/multi-root-vue-components.html

注意:Vue3 计划了多根模板，所以这在未来应该是可能的