Vue3模板组件编译问题？

Question

vue3 template组件不编译
代码是这样的，第二个template不会被编译

<template>
  <div class="entry" v-show="globalStore.loading">
  </div>
  <template v-show="!globalStore.loading">
    <Hall />
  </template>
</template>

网页呈现是这样的，template没被编译掉？Hall组件倒是编译了

Answer 1

一般来说直接看文档吧 👉 条件渲染 | Vue.js

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

所以应该是保留下来当成自定义元素了。

---

但是你这样在 template 上面用 v-show 编辑器的 lint 没有提示你错误嘛？
'v-show' directives cannot be put on <template> tags.eslintvue/valid-v-show

👉 vue/valid-v-show | eslint-plugin-vue