Vue3模板组件编译问题？

作者站长头像
站长
· 阅读数 22

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

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

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

回复
1个回答
avatar
test
2024-06-20

一般来说直接看文档吧 👉 条件渲染 | 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-showanswer image

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容