删除 v-if 条件生成的注释标记

Question

想要从 HTML 中删除条件注释标记 ( )

例如我正在使用一个条件

<sidebar v-if="showSidebarTrigger"> ... </sidebar>

当生成的 dom 中的条件为 false 时，我希望将其删除

Answer 1

这是我发现 Evan You 在相关Github 问题上所说的话

v-if通常用于相对稳定的节点结构中的元素，将其渲染为空注释标签使 vnode 列表比较更有效，因为列表更“稳定”，并且避免了元素未键入键时的一些边缘情况。

正如声明中进一步所述 - 相关的解决方法将在此处起作用 -v-for如果您不想在 DOM 中使用大量此类注释标签，则可以将其用作替代方案。

让computed财产说displaySideBar并showSidebarTrigger有条件地推入array并归还。

displaySideBar() {
let showSideBar = []
  if(showSidebarTrigger) {
    showSideBar.push(showSidebarTrigger)
  }
}

现在在你的 html 部分

<div v-for="(sideBar, index) in displaySideBar" :key="`sideBar-${index}`">
   <h1> Hey </h1>
</div>