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的资料请关注脚本之家其它相关文章!
相关文章
vue+Ant Design进度条滑块与input联动效果实现
最近接到这样一个需求滑块进度与输入框为一致,默认值为80,最小不能小于30,最大为100,怎么实现这个联动效果呢,下面小编给大家分享下基于vue+Ant Design进度条滑块与input联动效果的实现,感兴趣的朋友跟随小编一起看看吧2022-12-12关于vue的npm run dev和npm run build的区别介绍
这篇文章主要介绍了关于vue的npm run dev和npm run build的区别介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-01-01element-ui Upload上传组件动态配置action方式
这篇文章主要介绍了element-ui Upload上传组件动态配置action方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-07-07Vue分别运用class绑定和style绑定通过点击实现样式切换
这篇文章主要为大家介绍了Vue分别运用class绑定和style绑定通过点击实现样式切换,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
最新评论