vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 Fragment bug

vue3中Fragment特性的一个bug需要注意事项

作者:天渺工作室

这篇文章主要介绍了vue3中Fragment特性的一个bug,需要留意的注意事项示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

vue3中的Fragment 模版碎片特性

vue3中的Fragment 模版碎片特性是什么,简单的理解就是template模板代码不在像vue2中那样必须在根节点在包裹一层节点了。

vue2写法

<template>
  <div>
    <h1>标题</h1>
    <p>正文内容</p>
  </div>
</template>

vue3写法

<template>
    <h1>标题</h1>
    <p>正文内容</p>
</template>

vue3中Fragment特性的一个bug(需要留意的问题)

组件HelloWorld:

<template>
    <h1>2333</h1>
    <h1>666</h1>
</template>

组件HelloWorld的使用

<template>
   <HelloWorld v-if="showBool" /> <!--v-if正常-->
   <HelloWorld v-show="showBool" /> <!--v-show异常,showBool为false还是显示了-->
</template>
<script lang="ts" setup>
import HelloWorld from '../components/HelloWorld.vue'
const showBool = ref(false);
<scrip>

同时控制台waring :

[Vue warn]: Runtime directive used on component with non-element root node. The directives will not function as intended.

利用开发者模式看dom结构,发现v-show的display:none属性完全是没有的

解决方法

还是遵循vue2的写法那样,根节点在包裹一层就行了。
组件:

<template>
  <div>
    <h1>标题</h1>
    <p>正文内容</p>
  </div>
</template>

dom结构发现v-show的display:none属性有了

目前vue3.4.15这个问题仍然是没有解决的。在使用的时候还是需要注意。

以上就是vue3中Fragment特性的一个bug,需要留意的注意事项的详细内容,更多关于vue3中Fragment bug的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文