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

Question

想要从HTML中删除条件注释标记（）

我正在使用一个条件

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

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

Answer 1

这是我发现埃文·尤（Evan You）在相关的Github issue

上所说的

v-if通常用于相对稳定的节点结构中的元素，将其呈现为空注释标签会使vnode列表随着列表更“稳定”而更有效地扩散，并且避免了元素处于没有键。

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

让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>